/**
 * Pedro AI — NOVA v9
 * Teeqo visual app shell
 * Clean · Bold · White · Red · Tech-Education
 */

/* Rangos COMPLETOS, no pesos sueltos.
   La hoja pide 210 grosores que no estaban cargados (950, 850, 750, 650…):
   el navegador los sintetizaba estirando el trazo, y eso es lo que hacía que
   un botón no pareciera del mismo sistema que el de al lado. Estas tres son
   fuentes variables, así que pidiendo el rango cada peso sale de verdad. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200..800&family=Outfit:wght@100..900&family=Nunito:wght@200..1000&display=swap');

/* ══════════════════════ TOKENS ══════════════════════
   v6.112.0 — Una sola escala, no tres.

   En esta hoja convivían TRES familias de grises casi iguales: la que estaba
   declarada aquí abajo (#111318 · #3D4054 · #7B7F96), una familia Tailwind
   metida a mano en 537 sitios (#111827 · #475569 · #64748b) y la del aula del
   alumno (#14161D · #3A3D4E · #6B6F86). Casi iguales es lo peor que podían
   ser: dos grises que se parecen mucho pero no coinciden no se leen como un
   sistema, se leen como un descuido — y era exactamente por eso que dos
   botones de paneles distintos no parecían del mismo producto.

   Las tres se han mapeado a esta. Y los --aula-* del portal del alumno
   apuntan ahora a estos mismos valores, así que el panel del profesor y la
   pantalla del alumno son por fin el mismo producto y no dos parecidos.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  /* La marca. `--red` se queda de alias porque está escrito en 199 sitios y
     vale exactamente lo mismo; lo nuevo usa --brand, que además no miente
     sobre el color. */
  --brand:      #6C5CE7;
  --brand-d:    #5546D6;
  --brand-soft: #F2F0FE;
  --brand-bdr:  rgba(108,92,231,.22);

  --red:        #6C5CE7;
  --red-hover:  #5546D6;
  --red-light:  #FFF1F1;
  --red-mid:    #FFE0E0;
  --red-border: rgba(108,92,231,0.18);
  --red-glow:   rgba(108,92,231,0.12);

  --bg:         #F8F9FB;
  --surface:    #FFFFFF;
  --surface-2:  #F3F4F8;

  --border:     #E8EAEF;
  --border-2:   #D8DAE5;

  --text:       #111318;
  --text-2:     #3D4054;
  --text-3:     #7B7F96;
  --text-4:     #B0B4CC;

  --green:      #16A34A;
  --green-bg:   #F0FDF4;
  --green-bdr:  #BBF7D0;
  --amber:      #D97706;
  --amber-bg:   #FFFBEB;
  --blue:       #2563EB;
  --blue-bg:    #EFF6FF;

  --shadow-xs:  0 1px 3px rgba(17,19,24,.06);
  --shadow-sm:  0 2px 8px rgba(17,19,24,.08), 0 1px 3px rgba(17,19,24,.04);
  --shadow-md:  0 4px 16px rgba(17,19,24,.10), 0 2px 6px rgba(17,19,24,.06);
  --shadow-red: 0 4px 18px rgba(108,92,231,.22);

  --r:          10px;
  --r-lg:       14px;
  --r-xl:       20px;
  --font:       'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-head:  'Outfit', 'Plus Jakarta Sans', sans-serif;

  --header-h:   60px;
  --tab-h:      48px;
}

/* ══════════════════════ RESET ══════════════════════ */
#pedro-ai-app, #pedro-ai-app * { box-sizing: border-box; -webkit-font-smoothing: antialiased; }
html.pedro-lock, body.pedro-lock { overflow: hidden !important; }

/* ══════════════════════ SHELL ══════════════════════ */
#pedro-ai-app {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* ══════════════════════ HEADER ══════════════════════ */
.pedro-ai-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 22px;
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  z-index: 100;
  box-shadow: var(--shadow-xs);
}

.pedro-ai-header-left { display: flex; align-items: center; gap: 11px; }

.pedro-ai-logo {
  width: 36px; height: 36px;
  border-radius: 9px;
  border: 1.5px solid var(--red-border);
  object-fit: cover;
  background: var(--red-light);
}

.pedro-header-brand { display: flex; flex-direction: column; gap: 1px; }

.pedro-ai-title {
  margin: 0;
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 900;
  color: var(--text);
  letter-spacing: -.04em;
  line-height: 1;
}
.pedro-ai-title .red { color: var(--red); }

.pedro-ai-subtitle {
  margin: 0;
  font-size: 10.5px;
  color: var(--text-4);
  font-weight: 500;
  letter-spacing: .02em;
}

.pedro-ai-header-right { display: flex; align-items: center; gap: 8px; }

.pedro-ai-status-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px;
  background: var(--green-bg);
  border: 1px solid var(--green-bdr);
  border-radius: 20px;
  font-size: 11px; font-weight: 600;
  color: var(--green);
}
.pedro-ai-status-dot {
  width: 6px; height: 6px;
  background: var(--green); border-radius: 50%;
  animation: blink 2s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

#pedro-fullscreen-btn {
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-3); border-radius: var(--r);
  width: 34px; height: 34px; font-size: 15px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .18s;
}
#pedro-fullscreen-btn:hover { background: var(--red-light); color: var(--red); border-color: var(--red-border); }

/* Logout btn */
.pedro-ai-header-right form { display: inline; }
.pedro-ai-header-right form button[type="submit"],
.pedro-ai-header button[type="submit"] {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-3) !important;
  border-radius: var(--r) !important;
  padding: 6px 13px !important;
  cursor: pointer !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  font-family: var(--font) !important;
  transition: all .18s !important;
}
.pedro-ai-header-right form button[type="submit"]:hover {
  background: var(--red-light) !important;
  border-color: var(--red-border) !important;
  color: var(--red) !important;
}

/* ══════════════════════ TABS ══════════════════════ */
.pedro-ai-tabs {
  display: flex;
  background: var(--surface);
  border-bottom: 1.5px solid var(--border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  flex-shrink: 0;
  scrollbar-width: none;
  z-index: 90;
  padding: 0 6px;
}
.pedro-ai-tabs::-webkit-scrollbar { display: none; }

.pedro-ai-tab {
  flex-shrink: 0;
  padding: 0 15px;
  height: var(--tab-h);
  background: transparent; border: none;
  border-bottom: 2.5px solid transparent;
  color: var(--text-3);
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all .18s;
  white-space: nowrap;
  display: flex; align-items: center; gap: 5px;
  position: relative;
  margin-bottom: -1.5px;
}
.pedro-ai-tab:hover { color: var(--text-2); background: var(--bg); border-radius: var(--r) var(--r) 0 0; }
.pedro-ai-tab.active {
  color: var(--red);
  border-bottom-color: var(--red);
  font-weight: 700;
}

/* ══════════════════════ CONTENT ══════════════════════ */
.pedro-ai-content {
  flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  background: var(--bg);
  position: relative; z-index: 10;
  scrollbar-width: thin;
  scrollbar-color: var(--border-2) transparent;
}
.pedro-ai-content::-webkit-scrollbar { width: 4px; }
.pedro-ai-content::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }

.pedro-ai-panel { display: none; height: 100%; }
.pedro-ai-panel.active {
  display: flex;
  flex-direction: column;
  animation: panelIn .22s ease;
}
@keyframes panelIn {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ══════════════════════ CARDS ══════════════════════ */
.pedro-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px 22px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-xs);
  transition: box-shadow .18s, border-color .18s;
}
.pedro-card:hover { box-shadow: var(--shadow-sm); border-color: var(--border-2); }

.pedro-card-title {
  font-family: var(--font-head);
  font-size: 15px; font-weight: 800;
  color: var(--text); margin: 0 0 14px;
  letter-spacing: -.03em;
  display: flex; align-items: center; gap: 8px;
}
.pedro-card-title::before {
  content: ''; display: block;
  width: 4px; height: 16px;
  background: var(--red); border-radius: 3px;
  flex-shrink: 0;
}

/* ══════════════════════ FORMS ══════════════════════ */
.pedro-label, .p-label {
  display: block;
  font-size: 11px; font-weight: 700;
  color: var(--text-3); letter-spacing: .06em;
  text-transform: uppercase; margin-bottom: 5px;
}
.pedro-input, .pedro-select, .pedro-textarea,
.p-input, .p-select, .p-textarea {
  width: 100%; padding: 9px 13px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r); font-size: 13.5px;
  color: var(--text); font-family: var(--font);
  transition: all .18s; outline: none; margin-bottom: 10px;
}
.pedro-input:focus, .pedro-select:focus, .pedro-textarea:focus,
.p-input:focus, .p-select:focus, .p-textarea:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-glow);
  background: var(--surface);
}
.pedro-input::placeholder, .p-input::placeholder { color: var(--text-4); }
.pedro-textarea, .p-textarea { resize: vertical; min-height: 88px; line-height: 1.5; }

/* ══════════════════════ BUTTONS ══════════════════════ */
.pedro-btn-primary, .p-btn-primary,
.pedro-btn, .p-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 20px;
  background: var(--red); color: #fff; border: none;
  border-radius: var(--r);
  font-size: 13.5px; font-weight: 700;
  font-family: var(--font); cursor: pointer;
  transition: all .18s;
  box-shadow: var(--shadow-red);
  letter-spacing: -.01em; white-space: nowrap;
}
.pedro-btn-primary:hover, .pedro-btn:hover, .p-btn:hover {
  background: var(--red-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(108,92,231,.28);
}
.pedro-btn-primary:active, .p-btn:active { transform: translateY(0); }
.pedro-btn-primary:disabled, .p-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }

.pedro-btn-secondary, .p-btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 16px;
  background: var(--surface); color: var(--text-2);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  font-size: 13px; font-weight: 600; font-family: var(--font);
  cursor: pointer; transition: all .18s;
}
.pedro-btn-secondary:hover, .p-btn-secondary:hover {
  border-color: var(--red-border); color: var(--red);
  background: var(--red-light);
}
.pedro-btn-secondary:disabled, .p-btn-secondary:disabled,
.pedro-btn-secondary[disabled], .p-btn-secondary[disabled] {
  opacity: .42; cursor: not-allowed; pointer-events: none;
  background: var(--surface); color: var(--text-3);
  border-color: var(--border);
}

/* ══════════════════════ CHAT PANEL ══════════════════════ */
.pedro-chat-panel-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--bg);
}

/* Quick actions chips */
.pedro-quick-actions {
  display: flex;
  gap: 8px;
  padding: 12px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  flex-shrink: 0;
}

.pedro-quick-action {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 12px; font-weight: 600; color: var(--text-2);
  cursor: pointer; transition: all .18s; user-select: none;
}
.pedro-quick-action:hover {
  background: var(--red-light);
  border-color: var(--red-border);
  color: var(--red);
  transform: translateY(-1px);
  box-shadow: var(--shadow-xs);
}
.pedro-quick-action-icon { font-size: 14px; }

.pedro-chat-helper-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 18px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,247,247,.96) 100%);
  border-bottom: 1px solid var(--border);
}

.pedro-chat-helper-label {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-4);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-right: 2px;
}

.pedro-chat-helper-chip,
.pedro-chat-helper-clear {
  min-height: 32px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all .18s;
}

.pedro-chat-helper-chip:hover,
.pedro-chat-helper-clear:hover {
  border-color: var(--red-border);
  color: var(--red);
  background: var(--red-light);
}

/* Messages area */
.pedro-chat-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.pedro-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.pedro-chat-messages::-webkit-scrollbar { width: 4px; }
.pedro-chat-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* Message row */
.pedro-chat-message {
  display: flex;
  gap: 10px;
  animation: msgSlideIn .22s cubic-bezier(.4,0,.2,1);
  max-width: 100%;
}
@keyframes msgSlideIn {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Avatar */
.pedro-chat-message .pedro-msg-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font-head);
  margin-top: 2px;
}
.pedro-chat-message.assistant .pedro-msg-avatar {
  background: var(--red-light);
  border: 1.5px solid var(--red-border);
  color: var(--red);
}
.pedro-chat-message.user .pedro-msg-avatar {
  background: var(--blue-bg);
  border: 1.5px solid rgba(37,99,235,.2);
  color: var(--blue);
}

/* Message content */
.pedro-msg-content { flex: 1; min-width: 0; }

.pedro-msg-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3);
  letter-spacing: .02em;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.pedro-chat-message.user .pedro-msg-content { align-items: flex-end; display: flex; flex-direction: column; }
.pedro-chat-message.user { flex-direction: row-reverse; }
.pedro-chat-message.user .pedro-msg-name { text-align: right; }

/* Bubble */
.pedro-chat-bubble {
  display: inline-block;
  padding: 11px 15px;
  border-radius: 4px 16px 16px 16px;
  font-size: 14px;
  line-height: 1.65;
  max-width: 82%;
  word-break: break-word;
}

.pedro-chat-message.assistant .pedro-chat-bubble {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: var(--shadow-xs);
  border-radius: 4px 16px 16px 16px;
}

.pedro-chat-message.user .pedro-chat-bubble {
  background: var(--red);
  color: #fff;
  border-radius: 16px 4px 16px 16px;
  box-shadow: var(--shadow-red);
}

/* Typing indicator */
.pedro-typing {
  display: flex; gap: 10px;
  animation: msgSlideIn .22s ease;
}
.pedro-typing .pedro-msg-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--red-light); border: 1.5px solid var(--red-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.pedro-typing-bubble {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px 16px 16px 16px;
  padding: 13px 16px;
  display: flex; gap: 4px; align-items: center;
  box-shadow: var(--shadow-xs);
}
.pedro-typing-dot {
  width: 7px; height: 7px;
  background: var(--text-4); border-radius: 50%;
  animation: typingBounce 1.2s ease-in-out infinite;
}
.pedro-typing-dot:nth-child(2) { animation-delay: .2s; }
.pedro-typing-dot:nth-child(3) { animation-delay: .4s; }
@keyframes typingBounce {
  0%,60%,100% { transform: translateY(0); }
  30%          { transform: translateY(-5px); }
}

/* Chat input area */
.pedro-chat-input-wrapper {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 18px 14px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.pedro-chat-input {
  flex: 1;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  font-size: 14px; color: var(--text);
  font-family: var(--font);
  transition: all .18s; outline: none;
  resize: none;
  min-height: 42px; max-height: 130px;
  line-height: 1.5;
  margin: 0;
}
.pedro-chat-input:focus {
  border-color: var(--red);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--red-glow);
}
.pedro-chat-input::placeholder { color: var(--text-4); }

.pedro-chat-send-btn {
  width: 42px; height: 42px;
  background: var(--red); color: #fff;
  border: none; border-radius: var(--r);
  cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; transition: all .18s;
  box-shadow: var(--shadow-red);
}
.pedro-chat-send-btn:hover {
  background: var(--red-hover);
  transform: scale(1.05);
  box-shadow: 0 5px 18px rgba(108,92,231,.3);
}
.pedro-chat-send-btn:disabled { opacity:.4; cursor:not-allowed; transform:none; }

/* char count */
.pedro-chat-footer {
  display: flex; justify-content: flex-end;
  padding: 0 18px 6px;
  font-size: 10.5px; color: var(--text-4);
  flex-shrink: 0;
  background: var(--surface);
}

.pedro-chat-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.pedro-chat-action-btn {
  min-height: 32px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all .18s;
}

.pedro-chat-action-btn:hover {
  border-color: var(--red-border);
  color: var(--red);
  background: var(--red-light);
}

/* ══════════════════════ QUIZ CODE ══════════════════════ */
.p-quiz-code {
  background: var(--red-light);
  border: 2px dashed var(--red-border);
  border-radius: var(--r-xl);
  padding: 26px 22px; text-align: center; margin-bottom: 18px;
}
.p-quiz-code-label {
  font-size: 10.5px; font-weight: 700; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: 8px;
}
.p-quiz-code-big {
  font-family: var(--font-head);
  font-size: 52px; font-weight: 900;
  color: var(--red); letter-spacing: .25em;
  line-height: 1; margin-bottom: 12px;
  animation: codePulse 3s ease-in-out infinite;
}
@keyframes codePulse {
  0%,100% { opacity:1; }
  50%      { opacity:.75; }
}

/* ══════════════════════ LOADING ══════════════════════ */
.pedro-ai-loading-overlay {
  position: absolute; inset: 0;
  background: rgba(248,249,251,.88);
  backdrop-filter: blur(4px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px; z-index: 200;
}
/* In whiteboard mode the panel-stage has overflow:hidden which clips absolute overlays.
   Use fixed so it covers the screen properly without being clipped. */
#pedro-ai-app.pedro-whiteboard-mode .pedro-ai-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483641;
  border-radius: 0;
}
.pedro-ai-spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--red-mid);
  border-top-color: var(--red);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.pedro-ai-loading-text {
  font-size: 13px; font-weight: 600; color: var(--text-3); margin: 0;
}

/* ══════════════════════ RANKING ══════════════════════ */
.pedro-ranking-item {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 15px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); margin-bottom: 7px;
  transition: all .18s; box-shadow: var(--shadow-xs);
}
.pedro-ranking-item:hover { transform: translateX(3px); box-shadow: var(--shadow-sm); }
.pedro-ranking-position { font-size: 18px; width: 26px; text-align: center; flex-shrink: 0; }
.pedro-ranking-name     { flex: 1; font-weight: 700; font-size: 13.5px; color: var(--text); }
.pedro-ranking-score    { font-size: 12.5px; color: var(--text-3); font-weight: 500; }

/* ══════════════════════ QUIZ QUESTIONS ══════════════════════ */
.pedro-quiz-question {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 16px; margin-bottom: 10px;
  box-shadow: var(--shadow-xs); transition: all .18s;
}
.pedro-quiz-question:hover { box-shadow: var(--shadow-sm); }
.pedro-quiz-question-text { font-size: 13.5px; font-weight: 700; color: var(--text); margin-bottom: 10px; line-height: 1.5; }
.pedro-quiz-options { display: flex; flex-direction: column; gap: 6px; }
.pedro-quiz-option {
  padding: 9px 13px; border: 1px solid var(--border);
  border-radius: var(--r); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all .15s;
  background: var(--surface-2); color: var(--text-2);
}
.pedro-quiz-option:hover {
  border-color: var(--red-border); background: var(--red-light); color: var(--red);
  transform: translateX(2px);
}
.pedro-quiz-option.pedro-quiz-option-correct {
  background: var(--green-bg); border-color: var(--green-bdr); color: var(--green);
}

/* ══════════════════════ QUIZ EDITOR (inline) ══════════════════════
   El profesor puede pulsar ✎ junto a cada pregunta para corregir
   texto, opciones y marcar cuál es la correcta. Se guarda pregunta
   a pregunta contra el servidor. Bloqueado una vez el quiz está live.
═══════════════════════════════════════════════════════════════════ */
.p-quiz-preview-header {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin: 18px 0 10px;
}
.p-quiz-preview-title {
  font-size: 13px; font-weight: 700; color: var(--text-2); margin: 0;
}
.p-quiz-edit-hint {
  font-size: 12px; color: var(--text-3); margin: 0;
}

/* Question head: title + edit pencil on the right */
.p-quiz-q-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}
.p-quiz-q-head .pedro-quiz-question-text { margin-bottom: 0; flex: 1; min-width: 0; }

.p-q-edit-btn {
  flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-3);
  font-size: 14px; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.p-q-edit-btn:hover:not(:disabled) {
  border-color: var(--red-border);
  background: var(--red-light);
  color: var(--red);
  transform: scale(1.06);
}
.p-q-edit-btn:focus-visible {
  outline: 2px solid var(--red); outline-offset: 2px;
}

/* Editing state container */
.pedro-quiz-question.p-q-editing {
  border-color: var(--red-border);
  background: var(--red-light);
  box-shadow: 0 0 0 3px var(--red-glow);
}

/* Editing: question label + textarea */
.p-q-edit-head { margin-bottom: 12px; }
.p-q-edit-label {
  display: block; font-size: 10.5px; font-weight: 800;
  color: var(--text-3); letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 6px;
}
.p-q-edit-question {
  width: 100%; padding: 10px 12px;
  border: 1.5px solid var(--border); border-radius: var(--r);
  background: var(--surface); color: var(--text);
  font-family: var(--font); font-size: 14px; font-weight: 600;
  line-height: 1.5; resize: vertical; min-height: 56px;
  transition: border-color .15s, box-shadow .15s;
}
.p-q-edit-question:focus {
  outline: none; border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-glow);
}

/* Editing: options block */
.p-q-edit-options {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--border);
}
.p-q-edit-hint {
  font-size: 11px; color: var(--text-3);
  margin-bottom: 4px; font-style: italic;
}
.p-q-edit-opt-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: 8px;
  cursor: pointer; transition: background .12s;
}
.p-q-edit-opt-row:hover { background: var(--surface-2); }
.p-q-edit-opt-row input[type="radio"] {
  accent-color: var(--green);
  width: 18px; height: 18px; flex-shrink: 0; cursor: pointer;
}
.p-q-edit-opt-row:has(input[type="radio"]:checked) {
  background: var(--green-bg);
}
.p-q-edit-letter {
  flex: 0 0 22px; text-align: center;
  font-family: var(--font-head); font-weight: 800; font-size: 13px;
  color: var(--text-3); letter-spacing: .02em;
}
.p-q-edit-opt {
  flex: 1; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text);
  font-family: var(--font); font-size: 13px; min-width: 0;
  transition: border-color .15s, box-shadow .15s;
}
.p-q-edit-opt:focus {
  outline: none; border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-glow);
}

/* Editing: action row */
.p-q-edit-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 12px;
}
.p-q-edit-actions .pedro-btn-secondary,
.p-q-edit-actions .pedro-btn {
  font-size: 12.5px; padding: 8px 16px;
}

/* Green flash when a question was just saved */
@keyframes p-q-saved-flash {
  0%   { background: var(--green-bg); border-color: var(--green); }
  100% { background: var(--surface);  border-color: var(--border); }
}
.pedro-quiz-question.p-q-just-saved {
  animation: p-q-saved-flash 1.6s ease-out;
}

/* Mobile: stack and shrink */
@media (max-width: 560px) {
  .p-q-edit-opt-row { gap: 8px; }
  .p-q-edit-letter { flex-basis: 18px; font-size: 12px; }
  .p-q-edit-opt { font-size: 13px; padding: 7px 10px; }
  .p-q-edit-question { font-size: 15px; /* avoid iOS zoom */ }
  .p-q-edit-options { padding: 10px; }
  .p-q-edit-actions { flex-direction: column-reverse; }
  .p-q-edit-actions .pedro-btn,
  .p-q-edit-actions .pedro-btn-secondary { width: 100%; }
}

/* ══════════════════════ FLASHCARDS ══════════════════════ */
.p-memory-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }

.p-memory-stats {
  display: flex; gap: 8px; align-items: center;
}
.p-memory-stat {
  display: inline-flex; align-items: center;
  padding: 5px 12px; border-radius: 20px;
  font-size: 12px; font-weight: 700;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-2);
}
/* ── Tarjetas del juego de memoria ────────────────────────────────
   El reverso era un «🇪🇸 Toca» sobre blanco: doce rectángulos iguales sin
   nada que mirar. Ahora el reverso tiene identidad propia y la cara dice de
   qué idioma es la palabra, que en una pareja español–inglés es media
   partida. Las tarjetas también crecen: 80px dejaban el texto en 12px y
   partido, y esto se proyecta en la pizarra de un aula. */
.p-flip { height: 104px; perspective: 900px; cursor: pointer; }
.p-flip-inner {
  width:100%;height:100%;position:relative;transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  transition:transform .46s cubic-bezier(.2,.9,.25,1.15);
}
.p-flip.flipped .p-flip-inner { transform: rotateY(180deg); }
.p-flip-front, .p-flip-back {
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  padding:10px;text-align:center;line-height:1.28;
  overflow:hidden;
}

/* Reverso: degradado de la casa y una trama suave, para que un tablero de
   doce tarjetas tenga algo que mirar antes de empezar. */
.p-flip-front {
  z-index:2;color:#fff;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.20), transparent 46%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.055) 0 7px, transparent 7px 14px),
    linear-gradient(140deg, #6C5CE7 0%, #5546D6 52%, #3B2FA3 100%);
  box-shadow:0 4px 14px rgba(85,70,214,.26), inset 0 1px 0 rgba(255,255,255,.24);
  border:1px solid rgba(255,255,255,.14);
}
.p-flip-mark{
  font-size:30px;font-weight:800;line-height:1;color:rgba(255,255,255,.62);
  text-shadow:0 2px 8px rgba(23,18,51,.30);
}
.p-flip:hover .p-flip-front{ box-shadow:0 10px 26px rgba(85,70,214,.34), inset 0 1px 0 rgba(255,255,255,.28); }

/* Cara: papel limpio, con la etiqueta del idioma arriba. */
.p-flip-back {
  transform:rotateY(180deg);z-index:1;visibility:hidden;
  flex-direction:column;gap:7px;
  background:var(--surface,#fff);color:var(--text-1,#111318);
  border:1.5px solid var(--border,#E8EAEF);
  box-shadow:0 6px 18px rgba(15,23,42,.09);
}
.p-flip-lang{
  font-size:9.5px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;
  padding:2.5px 8px;border-radius:999px;
  background:rgba(108,92,231,.10);color:#5546D6;border:1px solid rgba(108,92,231,.20);
}
.p-flip-text{ font-size:14px;font-weight:650;letter-spacing:-.01em;max-width:100% }
.p-flip.flipped .p-flip-back { visibility:visible; }
.p-flip.flipped .p-flip-front { visibility:hidden; }
.p-flip.matched .p-flip-back { visibility:visible; }
.p-flip.matched .p-flip-front { visibility:hidden; }

/* Acertada: verde, pero sin apagar el texto. Antes bajaba la opacidad del
   conjunto y las parejas ya resueltas se volvían ilegibles justo cuando la
   clase quiere repasarlas. */
.p-flip.matched .p-flip-back{
  background:var(--green-bg,#F0FDF4);border-color:var(--green-bdr,#BBF7D0);
  color:var(--green,#15803D);box-shadow:0 4px 14px rgba(22,163,74,.14);
}
.p-flip.matched .p-flip-lang{ background:rgba(22,163,74,.12);color:var(--green,#15803D);border-color:var(--green-bdr,#BBF7D0) }
.p-flip.matched{ cursor:default }

@media (max-width:520px){
  .p-flip{ height:88px }
  .p-flip-text{ font-size:13px }
  .p-flip-mark{ font-size:25px }
}
@media (prefers-reduced-motion:reduce){
  .p-flip-inner{ transition:none }
}

/* ══════════════════════ ALERTS ══════════════════════ */
.pedro-alert {
  padding: 10px 14px; border-radius: var(--r);
  font-size: 13px; font-weight: 500; margin-bottom: 12px;
  display: flex; align-items: flex-start; gap: 8px;
  animation: msgSlideIn .2s ease;
}
.pedro-alert-info    { background: var(--blue-bg); border:1px solid rgba(37,99,235,.2); color: var(--blue); }
.pedro-alert-success { background: var(--green-bg); border:1px solid var(--green-bdr); color: var(--green); }
.pedro-alert-warning { background: var(--amber-bg); border:1px solid rgba(217,119,6,.2); color: var(--amber); }
.pedro-alert-error   { background: var(--red-light); border:1px solid var(--red-border); color: var(--red-hover); }

/* ══════════════════════ PRINT BAR ══════════════════════ */
.pedro-print-bar {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 10px 18px; border-top: 1px solid var(--border);
  background: var(--surface-2);
}
@media print { .pedro-print-bar { display: none !important; } }

code {
  background: var(--red-light); border: 1px solid var(--red-border);
  border-radius: 5px; padding: 2px 6px;
  font-size: 12px; color: var(--red);
  font-family: 'SF Mono', 'Fira Code', monospace;
}

#psq-num-display { min-width: 40px; text-align: center; }

/* ══════════════════════ ENTRY ANIM ══════════════════════ */
.pedro-ai-tab { animation: tabIn .3s ease both; }
.pedro-ai-tab:nth-child(1){animation-delay:.04s} .pedro-ai-tab:nth-child(2){animation-delay:.07s}
.pedro-ai-tab:nth-child(3){animation-delay:.10s} .pedro-ai-tab:nth-child(4){animation-delay:.13s}
.pedro-ai-tab:nth-child(5){animation-delay:.16s} .pedro-ai-tab:nth-child(6){animation-delay:.19s}
.pedro-ai-tab:nth-child(7){animation-delay:.22s} .pedro-ai-tab:nth-child(8){animation-delay:.25s}
.pedro-ai-tab:nth-child(9){animation-delay:.28s}
@keyframes tabIn { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:translateY(0)} }

/* ══════════════════════ RESPONSIVE ══════════════════════ */
@media (max-width: 768px) {
  .pedro-ai-header { padding: 0 14px; height: 54px; }
  .pedro-ai-subtitle { display: none; }
  .pedro-ai-content { padding: 0; }
  .p-quiz-code-big { font-size: 36px; }
  .p-memory-grid { grid-template-columns: repeat(3, 1fr); }
  .pedro-quick-actions { padding: 10px 14px; }
  .pedro-chat-messages { padding: 14px 14px 8px; }
  .pedro-chat-input-wrapper { padding: 10px 14px 12px; }
}

/* ══════════════════════ ALIASES ══════════════════════ */
.pedro-ai-container { font-family: var(--font); }
.pedro-ai-header-left  { display: flex; align-items: center; gap: 11px; }
.pedro-ai-header-right { display: flex; align-items: center; gap: 8px; }
.p-roulette-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.p-hm-layout { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.p-story-scroll { max-height: 300px; overflow-y: auto; margin-bottom: 14px; }

/* ══════════════════════════════════════════════════════════
   CONTENIDO GENERADO POR IA — PREMIUM DISPLAY
══════════════════════════════════════════════════════════ */

/* ─── Vocabulary Result ─────────────────────────────────── */
.p-vocab-result {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  animation: panelIn .3s ease;
}

.p-vocab-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  background: linear-gradient(135deg, #FFF1F1 0%, #fff 60%);
  border-bottom: 1px solid var(--border);
}

.p-vocab-header-left { display: flex; flex-direction: column; gap: 4px; }

.p-vocab-topic-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--red-light);
  color: var(--red);
  border: 1px solid var(--red-border);
  border-radius: 20px;
  padding: 3px 11px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  width: fit-content;
}

.p-vocab-title {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 900;
  color: var(--text);
  margin: 0;
  letter-spacing: -.03em;
  text-transform: capitalize;
}

.p-vocab-count {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 12px;
  white-space: nowrap;
}

.p-vocab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  padding: 20px 22px;
}

.p-vocab-card {
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 14px;
  text-align: center;
  cursor: default;
  transition: all .2s cubic-bezier(.4,0,.2,1);
  animation: vocabCardIn .35s ease both;
  position: relative;
  overflow: hidden;
}

.p-vocab-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--red);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  transform: scaleX(0);
  transition: transform .2s;
}

.p-vocab-card:hover {
  border-color: var(--red-border);
  background: var(--surface);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(108,92,231,.1);
}
.p-vocab-card:hover::before { transform: scaleX(1); }

@keyframes vocabCardIn {
  from { opacity:0; transform:translateY(10px) scale(.96); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

.p-vocab-es {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 800;
  color: var(--red);
  margin-bottom: 8px;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.p-vocab-divider {
  width: 28px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--border-2), transparent);
  margin: 0 auto 8px;
}

.p-vocab-en {
  font-size: 12.5px;
  color: var(--text-3);
  font-weight: 500;
  line-height: 1.3;
}

/* ─── Conversational Cards ──────────────────────────────── */
.p-cards-result {
  animation: panelIn .3s ease;
}

.p-cards-result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.p-conv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.p-conv-focus {
  margin-bottom: 16px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, rgba(255,244,245,.9) 0%, rgba(255,255,255,.98) 100%);
  box-shadow: var(--shadow-sm);
}

.p-conv-focus[hidden] { display: none !important; }

.p-conv-focus-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.p-conv-focus-title {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 900;
  color: var(--text);
  letter-spacing: -.03em;
}

.p-conv-focus-sub {
  font-size: 12px;
  color: var(--text-3);
}

.p-conv-focus-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.p-conv-focus-stage {
  min-height: 220px;
}

.p-conv-stage-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 14px;
}

.p-conv-card.is-hidden-translation .p-conv-translation-top,
.p-conv-card.is-hidden-translation .p-conv-wb-en {
  display: none;
}

.p-conv-card.is-hidden-answer .p-conv-bubble-a,
.p-conv-card.is-hidden-answer .p-conv-translation-top {
  display: none;
}

.p-conv-card.is-hidden-answer.is-answer-revealed .p-conv-bubble-a,
.p-conv-card.is-hidden-answer.is-answer-revealed .p-conv-translation-top {
  display: block;
}

.p-conv-card.is-clickable {
  cursor: pointer;
}

.p-conv-card.is-clickable::after {
  content: 'Abrir';
  position: absolute;
  right: 12px;
  bottom: 12px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(17,24,39,.45);
}

.p-conv-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: all .2s cubic-bezier(.4,0,.2,1);
  animation: vocabCardIn .35s ease both;
  position: relative;
}

.p-conv-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: var(--card-color, var(--red));
}

.p-conv-card-top {
  background: var(--card-color, var(--red));
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.p-conv-card-num {
  width: 26px; height: 26px;
  background: rgba(255,255,255,.2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  font-weight: 900;
  color: rgba(255,255,255,.95);
  flex-shrink: 0;
  font-family: var(--font-head);
}

.p-conv-card-title {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.01em;
  line-height: 1.3;
  font-family: var(--font-head);
}

.p-conv-card-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.p-conv-row { display: flex; flex-direction: column; gap: 3px; }

.p-conv-lbl {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-4);
  text-transform: uppercase;
  letter-spacing: .07em;
}

.p-conv-val {
  font-size: 13.5px;
  color: var(--text);
  font-weight: 500;
  line-height: 1.5;
}

.p-conv-example {
  color: var(--text-2);
  font-style: italic;
}

.p-conv-translation {
  color: var(--blue);
  font-weight: 600;
}

/* ─── Document / Lesson / Reading (formatDoc) ───────────── */
.p-doc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  animation: panelIn .3s ease;
}

.p-doc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  background: linear-gradient(135deg, #FFF1F1 0%, #fff 70%);
  border-bottom: 2px solid var(--border);
}

.p-doc-header-left { display: flex; align-items: center; gap: 12px; }

.p-doc-icon-wrap {
  width: 44px; height: 44px;
  background: var(--red-light);
  border: 1.5px solid var(--red-border);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.p-doc-title {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 900;
  color: var(--text);
  letter-spacing: -.03em;
  line-height: 1.2;
  margin-bottom: 2px;
}

.p-doc-sub {
  font-size: 11.5px;
  color: var(--text-3);
  font-weight: 500;
}

.p-doc-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.p-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-3);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .03em;
}

.p-print-btn {
  font-size: 12px !important;
  padding: 7px 14px !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.p-doc-body {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Intro text before first heading */
.p-doc-intro {
  padding: 0 0 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}

.p-doc-intro p {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.75;
  margin: 0 0 8px;
}

/* Section blocks */
.p-section {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 10px;
  transition: box-shadow .18s;
}

.p-section:hover { box-shadow: var(--shadow-sm); }

.p-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  background: color-mix(in srgb, var(--sec-color, var(--red)) 7%, white);
  border-bottom: 1px solid color-mix(in srgb, var(--sec-color, var(--red)) 15%, transparent);
}

.p-section-num {
  width: 24px; height: 24px;
  background: var(--sec-color, var(--red));
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: 900;
  flex-shrink: 0;
  font-family: var(--font-head);
}

.p-section-head-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.p-section-head-text {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 800;
  color: var(--sec-color, var(--red));
  letter-spacing: -.01em;
  flex: 1;
}

.p-section-body {
  padding: 14px 16px;
  background: var(--surface);
}

.p-section-body p {
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.75;
  margin: 0 0 10px;
}
.p-section-body p:last-child { margin-bottom: 0; }

.p-section-body ul, .p-section-body ol {
  padding-left: 20px;
  margin: 6px 0;
}

.p-section-body li {
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.65;
  margin-bottom: 5px;
  padding-left: 4px;
}

.p-section-body li::marker {
  color: var(--sec-color, var(--red));
  font-weight: 700;
}

.p-section-body strong { color: var(--text); font-weight: 700; }
.p-section-body em { color: var(--text-3); font-style: italic; }

.p-section-body h3 {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  margin: 12px 0 6px;
  letter-spacing: -.02em;
}

.p-section-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
  font-size: 13px;
}

.p-section-body th {
  background: var(--surface-2);
  padding: 8px 12px;
  border: 1px solid var(--border);
  font-weight: 700;
  color: var(--text-2);
  text-align: left;
}

.p-section-body td {
  padding: 8px 12px;
  border: 1px solid var(--border);
  color: var(--text-2);
  vertical-align: top;
}

.p-section-body tr:nth-child(even) td {
  background: var(--surface-2);
}

.p-section-body hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 12px 0;
}

/* Plain text (no sections) */
.p-doc-plain {
  padding: 4px 0;
}
.p-doc-plain p {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.75;
  margin: 0 0 12px;
}
.p-doc-plain p:last-child { margin-bottom: 0; }
.p-doc-plain ul, .p-doc-plain ol { padding-left: 20px; margin: 6px 0 12px; }
.p-doc-plain li {
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.65;
  margin-bottom: 5px;
}
.p-doc-plain li::marker { color: var(--red); }
.p-doc-plain strong { color: var(--text); }

/* ─── Trabalenguas ──────────────────────────────────────── */
.p-tw-result {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  animation: panelIn .3s ease;
}

.p-tw-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  background: linear-gradient(135deg, #FFF1F1 0%, #fff 70%);
  border-bottom: 1px solid var(--border);
}

.p-tw-icon {
  width: 46px; height: 46px;
  background: var(--red-light);
  border: 1.5px solid var(--red-border);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.p-tw-title {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 900;
  color: var(--text);
  letter-spacing: -.03em;
}

.p-tw-sub {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
}

.p-tw-sub strong { color: var(--red); font-weight: 800; }

.p-tw-list {
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.p-tw-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  border-left: 4px solid var(--red);
  transition: all .18s;
  animation: vocabCardIn .35s ease both;
}

.p-tw-item:hover {
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transform: translateX(3px);
}

.p-tw-item-num {
  width: 28px; height: 28px;
  background: var(--red);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  font-weight: 900;
  font-family: var(--font-head);
  flex-shrink: 0;
  margin-top: 1px;
}

.p-tw-item-text {
  font-size: 15px;
  color: var(--text);
  line-height: 1.75;
  font-weight: 500;
  letter-spacing: .01em;
}

/* ─── color-mix fallback for older browsers ─────────────── */
@supports not (color: color-mix(in srgb, red 7%, white)) {
  .p-section-head { background: #F4F2FF; }
}

/* ══════════════════════════════════════════════════════════
   QUIZ — QR CODE LAUNCH PANEL
══════════════════════════════════════════════════════════ */
.p-quiz-launch {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
  animation: panelIn .3s ease;
}
@media (max-width: 560px) { .p-quiz-launch { grid-template-columns: 1fr; } }

.p-quiz-code-block { display: flex; flex-direction: column; gap: 4px; }
.p-quiz-launch-actions,
.p-quiz-preview-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.p-quiz-launch-actions { margin-top: 6px; }
.p-quiz-preview-actions .pedro-btn-secondary,
.p-quiz-launch-actions .pedro-btn-secondary { padding: 9px 13px; font-size: 12px; }
.p-quiz-code-label { font-size: 11px; font-weight: 700; color: var(--text-4); text-transform: uppercase; letter-spacing: .08em; }
.p-quiz-code-big {
  font-family: var(--font-head); font-size: 52px; font-weight: 900;
  color: var(--red); letter-spacing: .18em; line-height: 1;
  text-shadow: 0 2px 12px rgba(108,92,231,.15);
}
.p-quiz-qr-block { display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; }
.p-qr-frame {
  background: #fff; border: 2px solid var(--border);
  border-radius: var(--r-lg); padding: 10px;
  box-shadow: var(--shadow-xs);
}
.p-qr-canvas { display: flex; align-items: center; justify-content: center; min-width: 140px; min-height: 140px; }
.p-qr-canvas img, .p-qr-canvas canvas { border-radius: 4px; display: block; }

/* ══════════════════════════════════════════════════════════
   SENTENCE ORDER — PREMIUM REDESIGN
══════════════════════════════════════════════════════════ */
.p-so-wrapper {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--shadow-sm); animation: panelIn .3s ease;
}
.p-so-header {
  display: flex; align-items: center; gap: 14px; padding: 18px 22px;
  background: linear-gradient(135deg, #EFF6FF 0%, #fff 70%);
  border-bottom: 1px solid var(--border);
}
.p-so-icon {
  width: 46px; height: 46px; background: #EFF6FF;
  border: 1.5px solid rgba(37,99,235,.2); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
}
.p-so-title { font-family: var(--font-head); font-size: 18px; font-weight: 900; color: var(--text); letter-spacing: -.03em; }
.p-so-subtitle { font-size: 12px; color: var(--text-3); margin-top: 2px; }

.p-so-zone-label {
  display: flex; align-items: center; gap: 7px;
  padding: 12px 22px 6px;
  font-size: 11px; font-weight: 700; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .07em;
}
.p-so-zone-dot { width: 8px; height: 8px; border-radius: 50%; }
.p-so-dot-pool   { background: #2563EB; }
.p-so-dot-target { background: #16A34A; }

.p-board {
  min-height: 60px; display: flex; flex-wrap: wrap;
  gap: 8px; align-items: center; padding: 12px 22px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.p-board-pool   { background: #EFF6FF; border-color: rgba(37,99,235,.12); }
.p-board-target { background: #F0FDF4; border-color: rgba(22,163,74,.12); min-height: 70px; }
.p-board-placeholder { color: var(--text-4); font-size: 13px; font-style: italic; pointer-events: none; user-select: none; }

.p-chip {
  display: inline-flex; align-items: center;
  padding: 8px 14px; background: var(--surface);
  border: 1.5px solid var(--border-2); border-radius: 20px;
  font-size: 14px; font-weight: 600; color: var(--text);
  cursor: pointer; transition: all .15s cubic-bezier(.4,0,.2,1);
  user-select: none; animation: chipIn .25s ease both;
  box-shadow: var(--shadow-xs);
}
@keyframes chipIn { from { opacity:0; transform:scale(.85); } to { opacity:1; transform:scale(1); } }
.p-chip:hover { background: var(--red-light); border-color: var(--red-border); color: var(--red); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.p-chip:active { transform: scale(.95); }
.p-board-target .p-chip { background: #fff; border-color: rgba(22,163,74,.25); }
.p-board-target .p-chip:hover { background: var(--red-light); border-color: var(--red-border); color: var(--red); }

.p-so-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 16px 22px; }

.p-so-feedback {
  display: flex; align-items: center; gap: 12px;
  margin: 0 22px 16px; padding: 13px 16px;
  border-radius: var(--r-lg); font-size: 13.5px; font-weight: 600;
  animation: panelIn .2s ease;
}
.p-so-correct { background: #ECFDF5; border: 1px solid #BBF7D0; color: #16A34A; }
.p-so-wrong   { background: var(--red-light); border: 1px solid var(--red-border); color: var(--red-hover); }

.p-so-solution {
  margin: 0 22px 16px; padding: 13px 18px;
  background: #EFF6FF; border: 1px solid rgba(37,99,235,.2);
  border-radius: var(--r-lg); font-size: 13.5px;
  animation: panelIn .2s ease;
}

/* ══════════════════════════════════════════════════════════
   10 GAME IDEAS PANEL
══════════════════════════════════════════════════════════ */
.p-game-ideas-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--shadow-sm); margin-top: 20px;
  animation: panelIn .3s ease;
}
.p-game-ideas-header {
  display: flex; align-items: center; gap: 14px; padding: 18px 22px;
  background: linear-gradient(135deg, #FFFBEB 0%, #fff 70%);
  border-bottom: 1px solid var(--border);
}
.p-game-ideas-icon {
  width: 46px; height: 46px; background: #FFFBEB;
  border: 1.5px solid rgba(217,119,6,.25); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
}
.p-game-ideas-title { font-family: var(--font-head); font-size: 18px; font-weight: 900; color: var(--text); letter-spacing: -.03em; }
.p-game-ideas-sub { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.p-game-ideas-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px; padding: 20px 22px;
}
.p-game-idea-card {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  transition: all .18s; animation: vocabCardIn .35s ease both;
}
.p-game-idea-card:hover { background: var(--surface); border-color: var(--border-2); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.p-game-idea-num {
  width: 26px; height: 26px; flex-shrink: 0; background: var(--red); color: #fff;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 900; font-family: var(--font-head); margin-top: 2px;
}
.p-game-idea-emoji { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.p-game-idea-content { flex: 1; min-width: 0; }
.p-game-idea-name { font-family: var(--font-head); font-size: 14px; font-weight: 800; color: var(--text); letter-spacing: -.02em; margin-bottom: 4px; }
.p-game-idea-desc { font-size: 12.5px; color: var(--text-3); line-height: 1.5; }
.p-game-idea-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.p-game-idea-tag {
  display: inline-block; padding: 2px 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; font-size: 10.5px; font-weight: 600; color: var(--text-3);
}

/* ══════════════════════════════════════════════════════════
   LIVE RANKING — PREMIUM LEADERBOARD
══════════════════════════════════════════════════════════ */
.p-rank-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-top: 20px;
  animation: panelIn .3s ease;
}
.p-rank-empty {
  text-align: center; padding: 28px 20px;
  color: var(--text-3); font-size: 14px; font-weight: 600;
  background: var(--surface); border: 1px dashed var(--border);
  border-radius: var(--r-xl); margin-top: 20px;
}
.p-rank-empty span { display: inline-block; margin-top: 6px; font-size: 12px; color: var(--text-4); }
.p-rank-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  padding: 14px 20px; background: linear-gradient(135deg, #FFF7ED, #fff);
  border-bottom: 1px solid var(--border);
}
.p-rank-stats div {
  background: rgba(255,255,255,.72); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px; text-align: center;
}
.p-rank-stats strong {
  display: block; font-family: var(--font-head); font-size: 24px; line-height: 1;
  color: var(--red); letter-spacing: -.02em;
}
.p-rank-stats span {
  display: block; margin-top: 3px; font-size: 10.5px; font-weight: 800;
  color: var(--text-3); text-transform: uppercase; letter-spacing: .06em;
}
.p-rank-section-title {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 20px 10px;
  font-family: var(--font-head); font-size: 13px; font-weight: 900;
  color: var(--text-2); text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 1px solid var(--border);
}
.p-rank-live-dot {
  width: 8px; height: 8px; background: #16A34A; border-radius: 50%;
  margin-left: 4px;
  animation: livePulse 1.5s ease-in-out infinite;
}
@keyframes livePulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.3)} }

/* Teams */
.p-rank-teams { padding: 12px 20px; display: flex; flex-direction: column; gap: 8px; }
.p-rank-team-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--r-lg);
}
.p-rank-medal { font-size: 20px; flex-shrink: 0; width: 28px; text-align: center; }
.p-rank-team-info { flex: 1; min-width: 0; }
.p-rank-team-name { font-size: 14px; font-weight: 800; color: var(--text); margin-bottom: 4px; display: block; }

/* Final Battle Podium */
.p-final-battle-podium {
  margin: 12px 20px 16px;
  padding: 16px;
  border: 1px solid #FCD34D;
  border-radius: var(--r-xl);
  background:
    radial-gradient(circle at 50% 0%, rgba(251,191,36,.24), transparent 44%),
    linear-gradient(135deg, #FFFBEB, #fff);
  box-shadow: 0 16px 34px rgba(251,191,36,.16);
}
.p-final-winner {
  text-align: center;
  padding: 8px 10px 14px;
}
.p-final-crown { font-size: 32px; filter: drop-shadow(0 6px 12px rgba(251,191,36,.35)); }
.p-final-avatar { font-size: 42px; line-height: 1; margin-top: 4px; }
.p-final-name {
  font-family: var(--font-head);
  font-size: 24px;
  font-weight: 900;
  color: var(--text);
  margin-top: 6px;
}
.p-final-score {
  display: inline-flex;
  margin-top: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(251,191,36,.18);
  color: #92400E;
  font-size: 12px;
  font-weight: 900;
}
.p-final-duel-list { display: grid; gap: 8px; }
.p-final-duel-row {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(251,191,36,.38);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.72);
}
.p-final-duel-row strong { color: var(--text); font-size: 14px; }
.p-final-duel-row em { color: var(--red); font-style: normal; font-weight: 900; font-size: 12px; }

/* Individual */
.p-rank-list { padding: 12px 20px; display: flex; flex-direction: column; gap: 6px; }
.p-rank-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  transition: all .2s; animation: vocabCardIn .3s ease both;
}
.p-rank-row:hover { background: var(--surface); box-shadow: var(--shadow-xs); }
.p-rank-row-top {
  background: linear-gradient(135deg, #FFFBEB, #fff);
  border-color: #FCD34D;
  box-shadow: 0 2px 12px rgba(251,191,36,.15);
}
.p-rank-pos { font-size: 20px; width: 28px; text-align: center; flex-shrink: 0; }
.p-rank-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; background: var(--surface);
  border: 1.5px solid var(--border); border-radius: 50%;
  font-size: 11px; font-weight: 900; color: var(--text-3);
  font-family: var(--font-head);
}
.p-rank-avatar { font-size: 22px; flex-shrink: 0; }
.p-rank-info { flex: 1; min-width: 0; }
.p-rank-name { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-rank-team-tag {
  display: inline-block; padding: 1px 7px; background: var(--red-light);
  color: var(--red); border-radius: 8px; font-size: 10px; font-weight: 800;
  margin-left: 5px; vertical-align: middle;
}
.p-rank-bar-wrap { height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; }
.p-rank-bar { height: 100%; background: var(--red); border-radius: 3px; transition: width .6s cubic-bezier(.4,0,.2,1); }
.p-rank-bar-gold { background: linear-gradient(90deg, #F59E0B, #FBBF24); }
.p-rank-score { text-align: right; flex-shrink: 0; min-width: 56px; }
.p-rank-pts-big { font-family: var(--font-head); font-size: 17px; font-weight: 900; color: var(--red); line-height: 1; }
.p-rank-pct { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.p-rank-sub { font-size: 11px; font-weight: 400; color: var(--text-3); }


/* ══════════════════════ TEEQO WOW LAYOUT OVERRIDES ══════════════════════ */

:root {
  --wow-bg: radial-gradient(circle at top left, rgba(108,92,231,.10), transparent 30%),
            radial-gradient(circle at top right, rgba(96,165,250,.10), transparent 28%),
            linear-gradient(180deg, #F6F7FB 0%, #EEF1F7 100%);
  --wow-sidebar: linear-gradient(180deg, #232638 0%, #1A1D2D 100%);
  --wow-sidebar-border: rgba(255,255,255,.08);
  --wow-sidebar-soft: rgba(255,255,255,.06);
  --wow-sidebar-strong: rgba(255,255,255,.12);
  --wow-main-border: rgba(17,19,24,.08);
  --wow-card-shadow: 0 24px 60px rgba(22, 27, 45, .08);
}

#pedro-ai-app {
  background: var(--wow-bg) !important;
}

#pedro-ai-app .pedro-wow-layout {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 18px;
  height: 100%;
  min-height: 0;
  padding: 10px;
}

#pedro-ai-app .pedro-wow-sidebar {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border-radius: 26px;
  background: var(--wow-sidebar);
  border: 1px solid var(--wow-sidebar-border);
  box-shadow: 0 28px 60px rgba(12, 15, 28, .34);
  overflow: hidden;
  color: #fff;
}

#pedro-ai-app .pedro-wow-nav {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}

#pedro-ai-app .pedro-wow-nav-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 0 0;
  border-top: 1px solid rgba(255,255,255,.08);
  background: transparent;
  border-radius: 0;
}

#pedro-ai-app .pedro-wow-nav-group-title {
  padding: 0 8px 4px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
}

#pedro-ai-app .pedro-wow-nav-item {
  min-height: 42px;
}

#pedro-ai-app .pedro-wow-nav-item-secondary {
  opacity: .82;
}

#pedro-ai-app .pedro-wow-brand {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

#pedro-ai-app .pedro-wow-brand-mark {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #ff5c62 0%, #6C5CE7 52%, #bf1419 100%);
  box-shadow: 0 14px 34px rgba(108,92,231,.35);
  flex: 0 0 52px;
}

#pedro-ai-app .pedro-wow-brand-copy {
  min-width: 0;
}

#pedro-ai-app .pedro-wow-kicker,
#pedro-ai-app .pedro-wow-nav-label {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.7);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
}

#pedro-ai-app .pedro-wow-brand-title {
  margin: 8px 0 4px;
  font-family: var(--font-head);
  font-size: 30px;
  line-height: .95;
  letter-spacing: -.05em;
  color: #fff;
}

#pedro-ai-app .pedro-wow-brand-title span {
  color: #ffa0a3;
}

#pedro-ai-app .pedro-wow-brand-subtitle {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255,255,255,.56);
}

#pedro-ai-app .pedro-wow-sidebar-card {
  padding: 18px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.03) 100%);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

#pedro-ai-app .pedro-wow-sidebar-pill,
#pedro-ai-app .pedro-wow-eyebrow,
#pedro-ai-app .pedro-wow-topbar-label {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
}

#pedro-ai-app .pedro-wow-sidebar-pill {
  background: rgba(255,255,255,.07);
  color: #fff;
  border: 1px solid rgba(255,255,255,.08);
  margin-bottom: 14px;
}

#pedro-ai-app .pedro-wow-sidebar-card h3 {
  margin: 0 0 10px;
  font-size: 17px;
  line-height: 1.35;
  color: #fff;
}

#pedro-ai-app .pedro-wow-sidebar-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,.72);
}

#pedro-ai-app .pedro-wow-nav {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding-right: 6px;
}

#pedro-ai-app .pedro-wow-nav-item {
  width: 100%;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  text-align: left;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.05);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.92);
  box-shadow: none;
  margin: 0;
  min-height: 0;
}

#pedro-ai-app .pedro-wow-nav-item:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
  color: #fff;
  transform: translateY(-1px);
}

#pedro-ai-app .pedro-wow-nav-item.active {
  background: linear-gradient(135deg, rgba(108,92,231,.20) 0%, rgba(255,120,125,.12) 100%);
  border-color: rgba(255,110,115,.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 14px 30px rgba(108,92,231,.16);
}

#pedro-ai-app .pedro-wow-nav-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.06);
  font-size: 18px;
}

#pedro-ai-app .pedro-wow-nav-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#pedro-ai-app .pedro-wow-nav-copy strong {
  display: block;
  font-size: 16px;
  line-height: 1.2;
  color: #fff;
}

#pedro-ai-app .pedro-wow-nav-copy small {
  display: block;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255,255,255,.62);
}

#pedro-ai-app .pedro-wow-main {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#pedro-ai-app .pedro-wow-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 4px 0;
}

#pedro-ai-app .pedro-wow-topbar-label {
  background: rgba(108,92,231,.08);
  color: var(--red);
  border: 1px solid rgba(108,92,231,.10);
}

#pedro-ai-app .pedro-wow-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, .9fr);
  gap: 16px;
  padding: 22px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.65);
  background: linear-gradient(135deg, rgba(255,255,255,.88) 0%, rgba(255,244,245,.80) 100%);
  box-shadow: var(--wow-card-shadow);
  backdrop-filter: blur(10px);
}

#pedro-ai-app .pedro-wow-eyebrow {
  background: rgba(108,92,231,.08);
  color: var(--red);
  border: 1px solid rgba(108,92,231,.08);
  margin-bottom: 14px;
}

#pedro-ai-app .pedro-wow-hero h2 {
  margin: 0 0 10px;
  font-family: var(--font-head);
  font-size: clamp(30px, 3vw, 46px);
  line-height: .98;
  letter-spacing: -.06em;
  color: #11162A;
  max-width: 12ch;
}

#pedro-ai-app .pedro-wow-hero p {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: #626A82;
  max-width: 62ch;
}

#pedro-ai-app .pedro-wow-hero-note {
  margin-top: 16px;
  font-size: 16px;
  font-weight: 700;
  color: #20263D;
}

#pedro-ai-app .pedro-wow-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-content: start;
}

#pedro-ai-app .pedro-wow-stat-card {
  padding: 16px;
  border-radius: 20px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(17,19,24,.06);
  box-shadow: 0 16px 34px rgba(17,19,24,.06);
}

#pedro-ai-app .pedro-wow-stat-card span {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 800;
  color: #7A8096;
  text-transform: uppercase;
  letter-spacing: .1em;
}

#pedro-ai-app .pedro-wow-stat-card strong {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-head);
  font-size: clamp(28px, 2vw, 40px);
  line-height: 1;
  letter-spacing: -.05em;
  color: #11162A;
}

#pedro-ai-app .pedro-wow-stat-card small {
  display: block;
  font-size: 14px;
  line-height: 1.55;
  color: #717893;
}

#pedro-ai-app .pedro-wow-workspace {
  flex: 1;
  min-height: 0;
  padding: 12px;
  border-radius: 28px;
  background: rgba(255,255,255,.42);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: var(--wow-card-shadow);
  overflow: hidden;
}

#pedro-ai-app .pedro-ai-content {
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: auto;
  background: transparent;
  display: block;
}

#pedro-ai-app .pedro-ai-panel {
  display: none;
  height: auto;
  min-height: 100%;
  padding: 0;
}

#pedro-ai-app .pedro-ai-panel.active {
  display: block;
}

#pedro-ai-app #pedro-chat-panel.active {
  display: block;
}

#pedro-ai-app .pedro-wow-panel-stage {
  min-height: 100%;
  padding: 18px;
  border-radius: 24px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(17,19,24,.06);
  box-shadow: 0 14px 40px rgba(17,19,24,.06);
}

#pedro-ai-app .pedro-wow-panel-stage-chat {
  padding: 0;
  overflow: hidden;
}

#pedro-ai-app .pedro-wow-panel-stage-chat .pedro-chat-panel-wrapper {
  height: 100%;
  min-height: 640px;
}

#pedro-ai-app .pedro-card,
#pedro-ai-app .p-game-ideas-panel,
#pedro-ai-app #pedro-game-result,
#pedro-ai-app #pedro-vocabulary-result,
#pedro-ai-app #pedro-lesson-result,
#pedro-ai-app #pedro-cards-result,
#pedro-ai-app #pedro-readings-result,
#pedro-ai-app #pedro-trabalenguas-result,
#pedro-ai-app #pedro-quiz-result,
#pedro-ai-app .curriculum-reference-item {
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(250,251,255,1) 100%);
  border: 1px solid rgba(17,19,24,.07);
  border-radius: 22px;
  box-shadow: 0 14px 34px rgba(17,19,24,.05);
}

#pedro-ai-app .pedro-card {
  padding: 20px;
  margin-bottom: 18px;
}

#pedro-ai-app .pedro-card-header {
  margin-bottom: 14px;
}

#pedro-ai-app .pedro-card-body,
#pedro-ai-app .pedro-form-group,
#pedro-ai-app .pedro-vocabulary-panel-wrapper,
#pedro-ai-app .pedro-games-panel-wrapper,
#pedro-ai-app .pedro-quiz-panel-wrapper,
#pedro-ai-app .pedro-readings-panel-wrapper,
#pedro-ai-app .pedro-lesson-panel-wrapper,
#pedro-ai-app .pedro-cards-panel-wrapper,
#pedro-ai-app .pedro-trabalenguas-panel-wrapper {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#pedro-ai-app .pedro-text-muted {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-3);
}

#pedro-ai-app .pedro-input,
#pedro-ai-app .pedro-select,
#pedro-ai-app .pedro-textarea {
  background: #F8FAFD;
}

#pedro-ai-app .pedro-quick-actions {
  padding: 16px 18px;
  gap: 10px;
}

#pedro-ai-app .pedro-chat-messages {
  padding: 20px;
}

#pedro-ai-app .pedro-chat-input-wrapper {
  padding: 14px 18px 16px;
}

#pedro-ai-app .pedro-ai-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* (old responsive overrides removed — see v3 refinements below) */

/* ══════════════════════ TEEQO WOW REFINEMENTS v4 — CLEAN ══════════════════════ */

/* ── Layout grid ── */
#pedro-ai-app .pedro-wow-layout {
  grid-template-columns: 240px minmax(0, 1fr);
  align-items: stretch;
}

/* ── Sidebar: compact ── */
#pedro-ai-app .pedro-wow-sidebar {
  padding: 16px 12px;
  gap: 12px;
}

#pedro-ai-app .pedro-wow-brand {
  align-items: flex-start;
  padding: 2px 4px;
  gap: 8px;
  flex-direction: column;
  margin-bottom: 8px;
}

#pedro-ai-app .pedro-wow-brand-mark {
  display: none;
}

#pedro-ai-app .pedro-wow-brand-title {
  font-size: 32px;
  margin: 4px 0 2px;
}

#pedro-ai-app .pedro-wow-brand-subtitle {
  font-size: 11px;
  line-height: 1.4;
  opacity: .6;
}

#pedro-ai-app .pedro-wow-kicker {
  padding: 3px 8px;
  font-size: 8.5px;
}

#pedro-ai-app .pedro-wow-nav-label {
  padding: 3px 8px;
  font-size: 8.5px;
  margin-bottom: 0;
}

/* ── Nav: compact items, no scrollbar needed ── */
#pedro-ai-app .pedro-wow-nav {
  gap: 8px;
  padding-right: 0;
  overflow-y: visible;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

#pedro-ai-app .pedro-wow-nav::-webkit-scrollbar { width: 3px; }
#pedro-ai-app .pedro-wow-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 3px; }

#pedro-ai-app .pedro-wow-nav-item.pedro-ai-tab,
#pedro-ai-app button.pedro-wow-nav-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  height: auto !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 9px 11px !important;
  border-bottom: none !important;
  white-space: normal !important;
  line-height: 1 !important;
  border-radius: 14px !important;
  transform: none !important;
  gap: 10px;
  flex: 0 0 auto;
  grid-template-columns: none !important;
}

#pedro-ai-app .pedro-wow-nav-item + .pedro-wow-nav-item {
  margin-top: 0 !important;
}

#pedro-ai-app .pedro-wow-nav-item:hover,
#pedro-ai-app .pedro-wow-nav-item.active {
  border-bottom-color: transparent !important;
}

#pedro-ai-app .pedro-wow-nav-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 10px;
  font-size: 15px;
}

/* New: simple label text (replaces pedro-wow-nav-copy with strong/small) */
#pedro-ai-app .pedro-wow-nav-label-text {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.25;
}

#pedro-ai-app .pedro-wow-nav-item:hover .pedro-wow-nav-label-text {
  color: #fff;
}

/* Hide old nav-copy elements if any remain */
#pedro-ai-app .pedro-wow-nav-copy { display: none; }

/* ── Main column ── */
#pedro-ai-app .pedro-wow-main {
  gap: 6px;
  min-height: 0;
  overflow: hidden;
}

/* ── Hamburger menu (mobile) ── */
.pedro-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  font-size: 20px;
  cursor: pointer;
  color: var(--text);
  flex-shrink: 0;
  transition: all .15s;
}
.pedro-hamburger:hover {
  background: var(--surface-2);
  border-color: var(--border-2);
}
.pedro-mobile-backdrop {
  display: none;
}

/* ── Language toggle ── */
.pedro-lang-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 32px;
  padding: 0 10px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  cursor: pointer;
  color: var(--text-2);
  transition: all .15s;
}
.pedro-lang-toggle:hover {
  background: var(--surface-2);
  border-color: var(--border-2);
  color: var(--text);
}

/* ── Desktop-only elements ── */
.pedro-desktop-only { }

/* ── Topbar: just the right actions ── */
#pedro-ai-app .pedro-wow-topbar {
  padding: 6px 10px 2px;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
}

#pedro-ai-app .pedro-ai-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  margin-left: auto;
}

/* Hide the topbar label pill */
#pedro-ai-app .pedro-wow-topbar-label {
  display: none;
}

/* ── Hero: completely removed ── */
#pedro-ai-app .pedro-wow-hero {
  display: none !important;
}

/* ── Workspace: direct content, no header ── */
#pedro-ai-app .pedro-wow-workspace {
  flex: 1;
  min-height: 0;
  padding: 0;
  border-radius: 22px;
  background: rgba(255,255,255,.50);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: var(--wow-card-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── Content area: SCROLLABLE ── */
#pedro-ai-app .pedro-ai-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto !important;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.12) transparent;
}

#pedro-ai-app .pedro-ai-content::-webkit-scrollbar { width: 5px; }
#pedro-ai-app .pedro-ai-content::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12); border-radius: 5px; }

/* ── Panels ── */
#pedro-ai-app .pedro-ai-panel {
  display: none;
  height: auto;
  min-height: 0;
  padding: 0;
}

#pedro-ai-app .pedro-ai-panel.active {
  display: block;
}

#pedro-ai-app .pedro-wow-panel-stage {
  padding: 18px;
  border-radius: 0;
  background: rgba(255,255,255,.96);
  border: none;
  box-shadow: none;
  min-height: auto;
}

#pedro-ai-app .pedro-wow-panel-stage-chat {
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

#pedro-ai-app .pedro-wow-panel-stage-chat .pedro-chat-panel-wrapper {
  height: 100%;
  min-height: 560px;
}

/* ── Chat panel special: needs flex height ── */
#pedro-ai-app #pedro-chat-panel.active {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#pedro-ai-app #pedro-chat-panel .pedro-wow-panel-stage-chat {
  flex: 1;
  min-height: 0;
}

/* ── Cards inside panels ── */
#pedro-ai-app .pedro-card {
  padding: 18px;
  margin-bottom: 14px;
  border-radius: 18px;
}

/* ── Header right actions ── */
#pedro-ai-app .pedro-ai-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ══════════════════════ RESPONSIVE v4 ══════════════════════ */
@media (max-width: 1400px) {
  #pedro-ai-app .pedro-wow-layout {
    grid-template-columns: 200px minmax(0, 1fr);
  }
}

@media (max-width: 1180px) {
  #pedro-ai-app .pedro-wow-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  #pedro-ai-app .pedro-wow-sidebar {
    overflow: visible;
    padding: 14px;
    gap: 10px;
  }

  #pedro-ai-app .pedro-wow-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    overflow: visible;
    padding-right: 0;
  }

  #pedro-ai-app .pedro-wow-nav-group {
    flex: 1 1 220px;
    min-width: 0;
  }

  #pedro-ai-app .pedro-wow-nav-item.pedro-ai-tab,
  #pedro-ai-app button.pedro-wow-nav-item {
    flex: 0 0 auto !important;
    padding: 8px 14px !important;
  }

  #pedro-ai-app .pedro-wow-main {
    min-height: 0;
    overflow: auto;
  }
}

@media (max-width: 900px) {
  #pedro-ai-app .pedro-ai-header-right {
    justify-content: flex-end;
  }
}


/* ══════════════════════════════════════════════════════════
   iPAD — 769 px a 1180 px (incluye landscape)
   Extendido para cubrir iPad 8 landscape (1080), iPad Air 11 (1180),
   iPad Pro 11 (1194). Scopeado a hover:none + pointer:coarse para no
   afectar portátiles pequeños con cursor.
══════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1180px) and (hover: none) and (pointer: coarse),
       (min-width: 769px) and (max-width: 1024px) {

  /* Mostrar botón hamburguesa */
  .pedro-hamburger {
    display: flex !important;
  }

  /* Ocultar botón fullscreen (no tiene sentido en tablet) */
  .pedro-desktop-only {
    display: none !important;
  }

  /* Layout de una sola columna, sin gap */
  #pedro-ai-app .pedro-wow-layout {
    padding: 0 !important;
    gap: 0 !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
    height: 100% !important;
  }

  /* Sidebar como drawer deslizable */
  #pedro-ai-app .pedro-wow-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 300px !important;
    max-width: 85vw !important;
    z-index: 2147483640 !important;
    transform: translateX(-100%) !important;
    transition: transform .28s cubic-bezier(.4,0,.2,1) !important;
    border-radius: 0 20px 20px 0 !important;
    overflow-y: auto !important;
    padding: 20px 16px !important;
    gap: 14px !important;
  }

  #pedro-ai-app .pedro-wow-sidebar.pedro-mobile-open {
    transform: translateX(0) !important;
  }

  /* Backdrop oscuro al abrir el drawer */
  .pedro-mobile-backdrop.pedro-mobile-open {
    display: block;
  }

  /* Mostrar brand dentro del drawer */
  #pedro-ai-app .pedro-wow-brand {
    display: flex !important;
  }

  /* Nav: lista vertical dentro del drawer */
  #pedro-ai-app .pedro-wow-nav {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    gap: 10px !important;
    padding: 0 !important;
  }

  #pedro-ai-app .pedro-wow-nav-group {
    padding: 10px !important;
    border-radius: 16px !important;
    gap: 8px !important;
  }

  #pedro-ai-app .pedro-wow-nav-group-title {
    padding: 0 4px 4px !important;
    font-size: 10px !important;
  }

  #pedro-ai-app .pedro-wow-nav-item.pedro-ai-tab,
  #pedro-ai-app button.pedro-wow-nav-item {
    width: 100% !important;
    flex: 0 0 auto !important;
    min-height: 54px !important;
    padding: 12px 14px !important;
    flex-direction: row !important;
    gap: 12px !important;
    border-radius: 14px !important;
  }

  #pedro-ai-app .pedro-wow-nav-icon {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    font-size: 17px !important;
    border-radius: 10px !important;
  }

  #pedro-ai-app .pedro-wow-nav-label-text {
    display: block !important;
    font-size: 14px !important;
    line-height: 1.28 !important;
  }

  /* Área de contenido principal ocupa toda la pantalla */
  #pedro-ai-app .pedro-wow-main {
    min-height: 0 !important;
    overflow: auto !important;
  }
}

@media (max-width: 680px) {
  /* Hamburger button visible */
  .pedro-hamburger {
    display: flex !important;
  }

  /* Hide fullscreen button on mobile */
  .pedro-desktop-only {
    display: none !important;
  }

  /* Topbar: single row, always */
  #pedro-ai-app .pedro-wow-topbar {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    padding: 8px 10px 4px !important;
    gap: 6px !important;
  }

  #pedro-ai-app .pedro-ai-header-right {
    flex-wrap: nowrap !important;
    gap: 5px !important;
    margin-left: auto !important;
  }

  /* Smaller controls on mobile */
  #pedro-ai-app .pedro-ai-status-badge {
    padding: 4px 8px !important;
    font-size: 11px !important;
  }

  #pedro-ai-app .pedro-ai-header-right form button[type="submit"] {
    padding: 4px 10px !important;
    font-size: 11px !important;
  }

  .pedro-lang-toggle {
    height: 28px !important;
    padding: 0 7px !important;
    font-size: 10px !important;
  }

  .pedro-hamburger {
    width: 36px !important;
    height: 36px !important;
    font-size: 18px !important;
  }

  #pedro-ai-app .pedro-wow-layout {
    padding: 0 !important;
    gap: 0 !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
    height: 100% !important;
  }

  /* Sidebar: hidden off-screen left, slides in as drawer */
  #pedro-ai-app .pedro-wow-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(306px, 84vw) !important;
    max-width: 84vw !important;
    z-index: 2147483640 !important;
    transform: translateX(-100%) !important;
    transition: transform .28s cubic-bezier(.4,0,.2,1) !important;
    border-radius: 0 18px 18px 0 !important;
    overflow-y: auto !important;
    padding: max(14px, env(safe-area-inset-top)) 10px calc(12px + env(safe-area-inset-bottom)) !important;
    gap: 8px !important;
  }

  #pedro-ai-app .pedro-wow-sidebar.pedro-mobile-open {
    transform: translateX(0) !important;
  }

  /* Backdrop */
  .pedro-mobile-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2147483639;
    background: rgba(0,0,0,.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  .pedro-mobile-backdrop.pedro-mobile-open {
    display: block;
  }

  /* Show brand in drawer */
  #pedro-ai-app .pedro-wow-brand {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding: 4px 6px 14px !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    margin-bottom: 8px !important;
    min-height: 104px !important;
  }

  #pedro-ai-app .pedro-wow-kicker {
    padding: 4px 8px !important;
    font-size: 9px !important;
    letter-spacing: .08em !important;
  }

  #pedro-ai-app .pedro-wow-brand-title {
    margin: 4px 0 0 !important;
    font-size: 34px !important;
    line-height: .88 !important;
    letter-spacing: -.06em !important;
  }

  #pedro-ai-app .pedro-wow-brand-subtitle {
    display: block !important;
    max-width: 18ch !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    color: rgba(255,255,255,.46) !important;
  }

  /* Nav: vertical list in drawer */
  #pedro-ai-app .pedro-wow-nav {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    gap: 6px !important;
    padding: 0 !important;
    margin-top: 2px !important;
  }

  #pedro-ai-app .pedro-wow-nav-group {
    padding: 4px 0 0 !important;
    border-radius: 0 !important;
    gap: 3px !important;
    background: transparent !important;
    border: none !important;
    border-top: 1px solid rgba(255,255,255,.06) !important;
    box-shadow: none !important;
  }

  #pedro-ai-app .pedro-wow-nav-group-title {
    padding: 0 6px 4px !important;
    font-size: 9px !important;
    color: rgba(255,255,255,.4) !important;
  }

  #pedro-ai-app .pedro-wow-nav-item.pedro-ai-tab,
  #pedro-ai-app button.pedro-wow-nav-item {
    width: 100% !important;
    flex: 0 0 auto !important;
    min-height: 42px !important;
    padding: 7px 8px !important;
    flex-direction: row !important;
    gap: 9px !important;
    border-radius: 11px !important;
    background: rgba(255,255,255,.02) !important;
    border-color: rgba(255,255,255,.03) !important;
    box-shadow: none !important;
  }

  #pedro-ai-app .pedro-wow-nav-icon {
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,.05) !important;
  }

  #pedro-ai-app .pedro-wow-nav-label-text {
    display: block !important;
    font-size: 12.5px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
  }

  #pedro-ai-app .pedro-wow-nav-item.active {
    background: linear-gradient(135deg, rgba(108,92,231,.18) 0%, rgba(255,120,125,.1) 100%) !important;
    border-color: rgba(255,110,115,.2) !important;
    box-shadow: 0 8px 16px rgba(108,92,231,.1) !important;
  }

  /* Main area: full screen, stretch to bottom */
  #pedro-ai-app .pedro-wow-main {
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    gap: 0 !important;
  }

  #pedro-ai-app .pedro-wow-topbar {
    flex-shrink: 0 !important;
  }

  #pedro-ai-app .pedro-wow-workspace {
    border-radius: 0 !important;
    min-height: 0 !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  #pedro-ai-app .pedro-ai-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #pedro-ai-app .pedro-ai-panel.active {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: auto !important;
  }

  #pedro-ai-app .pedro-wow-panel-stage {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  /* Non-chat panels: scroll inside */
  #pedro-ai-app .pedro-wow-panel-stage:not(.pedro-wow-panel-stage-chat) {
    overflow-y: auto !important;
    padding: 14px !important;
  }

  /* Chat panel: flex chain to bottom */
  #pedro-ai-app .pedro-wow-panel-stage-chat {
    overflow: hidden !important;
  }

  #pedro-ai-app .pedro-wow-panel-stage-chat .pedro-chat-panel-wrapper {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: auto !important;
  }

  #pedro-ai-app .pedro-chat-messages {
    flex: 1 !important;
    overflow-y: auto !important;
    min-height: 0 !important;
  }

  #pedro-ai-app .pedro-chat-input-wrapper {
    flex-shrink: 0 !important;
    padding: 8px 10px !important;
  }

  #pedro-ai-app .pedro-quick-actions {
    flex-shrink: 0 !important;
  }

  #pedro-ai-app .pedro-card {
    padding: 14px;
  }

  #pedro-ai-app .pedro-chat-messages,
  #pedro-ai-app .pedro-chat-input-wrapper,
  #pedro-ai-app .pedro-quick-actions {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* Chat: tighter on mobile */
  #pedro-ai-app .pedro-quick-actions {
    padding-top: 8px !important;
    padding-bottom: 6px !important;
    gap: 5px !important;
  }

  #pedro-ai-app .pedro-quick-btn {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }

  #pedro-ai-app .pedro-quick-label {
    font-size: 9px !important;
  }

  #pedro-ai-app .pedro-chat-messages {
    padding-top: 10px !important;
    padding-bottom: 6px !important;
  }

  #pedro-ai-app .pedro-chat-bubble {
    font-size: 14px !important;
    padding: 12px 14px !important;
    max-width: 92% !important;
  }

  #pedro-ai-app .pedro-msg-avatar {
    width: 30px !important;
    height: 30px !important;
    font-size: 14px !important;
  }

  #pedro-ai-app .pedro-msg-name {
    font-size: 10px !important;
  }

  #pedro-ai-app .pedro-chat-input-wrapper {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  #pedro-ai-app .pedro-chat-input {
    font-size: 15px !important;
    padding: 10px 12px !important;
    min-height: 42px !important;
  }

  #pedro-ai-app .pedro-chat-send {
    width: 42px !important;
    height: 42px !important;
  }

  #pedro-ai-app .pedro-wow-panel-stage-chat .pedro-chat-panel-wrapper {
    min-height: 300px;
  }

  #pedro-ai-app .pedro-wow-panel-stage-chat {
    padding: 0 !important;
  }

  .p-vocab-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    gap: 6px !important;
  }

  .p-conv-grid {
    grid-template-columns: 1fr !important;
  }

  .p-conv-wordbank {
    grid-template-columns: 1fr !important;
  }

  .pedro-form-group select,
  .pedro-form-group input {
    font-size: 16px !important;
  }

  .p-quiz-code-big {
    font-size: 28px !important;
  }

  .pedro-print-bar {
    flex-direction: column;
  }
}

@media (max-width: 420px) {
  .p-vocab-grid {
    grid-template-columns: 1fr !important;
  }

  .p-memory-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}


/* Rich chat resources */
.pedro-chat-message.assistant.rich .pedro-msg-content {
  width: 100%;
  max-width: 980px;
}

.pedro-chat-message.assistant.rich .pedro-chat-bubble {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  max-width: 100%;
  width: 100%;
}

.pedro-chat-message.assistant.rich .p-doc {
  width: 100%;
}

.p-doc-resource .p-doc-header {
  align-items: flex-start;
}

.p-resource-block {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 16px;
  margin-bottom: 12px;
}

.p-resource-block:last-child {
  margin-bottom: 0;
}

.p-resource-block-title {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 12px;
  letter-spacing: -.02em;
}

.p-vocab-grid-chat {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.p-resource-list {
  display: grid;
  gap: 10px;
}

.p-resource-list-item {
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.65;
}

@media (max-width: 768px) {
  .pedro-chat-message.assistant.rich .pedro-msg-content {
    max-width: 100%;
  }
  .p-doc-header {
    padding: 16px;
    flex-direction: column;
    align-items: stretch;
  }
  .p-doc-body {
    padding: 16px;
  }
  .p-print-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ══════════════════════ CONJUGADOR RÁPIDO ══════════════════════ */
.pedro-card-header .pconj-title-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-left: 10px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #EDEBFE;
  color: #5546D6;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid rgba(108,92,231, .18);
}
.pconj-hud {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin-bottom: 14px;
}
.pconj-stat {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r); padding: 8px 10px; text-align: center;
}
.pconj-stat-k {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: .06em;
  color: var(--text-3); text-transform: uppercase; margin-bottom: 2px;
}
.pconj-stat b {
  font-size: 18px; font-weight: 800; color: var(--text);
}

.pconj-arena {
  position: relative;
  /* El profesor pidió más alto: con 320px fijos el verbo caía en un palmo y
     no daba tiempo ni a leerlo. Ahora crece con la pantalla —que esto se
     proyecta en clase— con un mínimo cómodo y un tope para que no se coma
     la caja de escribir. */
  height: clamp(380px, 56vh, 560px);
  background: linear-gradient(180deg, #0d1226 0%, #1a1f3a 100%);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: inset 0 0 40px rgba(0,0,0,.5);
  margin-bottom: 14px;
}
.pconj-ground {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 8px;
  background: linear-gradient(180deg, #dc2626 0%, #7f1d1d 100%);
  box-shadow: 0 -2px 12px rgba(220, 38, 38, .5);
}
.pconj-card {
  position: absolute; left: 50%; top: 0;
  transform: translate(-50%, 0);
  transform-origin: top center;
  will-change: transform;
  width: min(280px, 80%);
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 2px solid #f59e0b;
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  text-align: center;
  transition: background-color .25s, border-color .25s;
}
.pconj-card.pconj-flash-ok {
  background: linear-gradient(135deg, #bbf7d0 0%, #86efac 100%);
  border-color: #15803d;
}
.pconj-card.pconj-flash-fail {
  background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%);
  border-color: #991b1b;
  animation: pconj-shake .35s ease-in-out;
}
.pconj-card.pconj-flash-wrong {
  animation: pconj-shake .2s ease-in-out;
}
@keyframes pconj-shake {
  0%,100% { margin-left: -140px; }
  25% { margin-left: -148px; }
  75% { margin-left: -132px; }
}
.pconj-card-inner { display: flex; flex-direction: column; gap: 6px; }
.pconj-infinitive {
  font-size: 28px; font-weight: 800; color: #78350f;
  letter-spacing: .01em;
}
.pconj-meta {
  display: flex; justify-content: center; gap: 10px; align-items: baseline;
  font-size: 13px; color: #92400e;
}
.pconj-pronoun {
  font-weight: 700; font-size: 16px; color: #b45309;
}
.pconj-tense {
  font-style: italic; font-size: 12px;
  padding: 2px 8px; background: rgba(180, 83, 9, .15); border-radius: 999px;
}
.pconj-hint {
  font-size: 11px; color: #92400e; opacity: .75;
  padding-top: 4px; border-top: 1px dashed rgba(180, 83, 9, .3);
}

.pconj-input-row {
  display: flex; gap: 8px; margin-bottom: 10px;
}
.pconj-input-row .pedro-input { flex: 1; font-size: 18px; font-weight: 600; }
.pconj-input-row .pedro-btn { flex: 0 0 auto; }

.pconj-feedback { min-height: 22px; text-align: center; }
.pconj-fb { font-size: 14px; font-weight: 700; }
.pconj-fb.ok   { color: #15803d; }
.pconj-fb.fail { color: #991b1b; }
.pconj-fb.wrong { color: #ea580c; }
.pconj-fb small { font-weight: 500; opacity: .8; font-size: 11px; }

.pconj-end {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; height: 100%; gap: 10px;
  color: #fff; text-align: center; padding: 20px;
}
.pconj-end-title { font-size: 32px; font-weight: 800; }
.pconj-end-headline { font-size: 14px; opacity: .8; }
.pconj-end-score {
  font-size: 20px; font-weight: 700; color: #fde68a;
  margin: 8px 0 14px;
}

@media (max-width: 560px) {
  .pconj-hud { grid-template-columns: repeat(2, 1fr); }
  .pconj-arena { height: 260px; }
  .pconj-infinitive { font-size: 22px; }
}

/* ══════════════════════ UNIVERSAL GAME TOOLBAR ══════════════════════ */
.p-game-print, .p-game-next, .p-game-restart {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  transition: all .15s;
}
.p-game-print:hover, .p-game-next:hover, .p-game-restart:hover {
  border-color: var(--red-border);
  background: var(--red-light);
  color: var(--red);
}

/* ══════════════════════ SUPER PIZARRA DEL PROFE ══════════════════════ */
.tq-whiteboard-intro{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.tq-whiteboard-badge{flex-shrink:0;padding:8px 12px;border-radius:999px;background:#ECFDF5;border:1px solid #A7F3D0;color:#047857;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;}
.tq-whiteboard-shell{position:relative;display:flex;flex-direction:column;gap:12px;margin-top:16px;}
.tq-whiteboard-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px;background:rgba(255,255,255,.86);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-sm);}
.tq-wb-tool-group{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.tq-wb-tool{border:1px solid var(--border);border-radius:999px;padding:9px 13px;background:var(--surface);color:var(--text-2);font-weight:900;cursor:pointer;}
.tq-wb-tool.active{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 10px 24px rgba(108,92,231,.18);}
.tq-wb-color{width:32px;height:32px;border-radius:50%;background:var(--c);border:3px solid #fff;outline:1px solid var(--border);cursor:pointer;box-shadow:0 4px 10px rgba(15,23,42,.12);}
.tq-wb-color.active{outline:3px solid var(--red);transform:scale(1.08);}
.tq-wb-size{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:900;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;}
.tq-wb-size input{width:120px;}
.tq-wb-bg{width:auto;min-width:130px;padding:8px 12px;font-size:12px;font-weight:800;}
.tq-wb-actions{margin-left:auto;}
.tq-whiteboard-quickbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px;border:1px dashed var(--border);border-radius:var(--r-lg);background:rgba(255,255,255,.62);}
.tq-whiteboard-quickbar span{font-size:11px;font-weight:900;color:var(--text-3);text-transform:uppercase;letter-spacing:.08em;}
.tq-wb-save-status{min-height:18px;margin-left:auto;color:#047857;}
.tq-wb-stamp{width:36px;height:36px;border:1px solid var(--border);border-radius:12px;background:#fff;box-shadow:0 6px 14px rgba(15,23,42,.07);cursor:pointer;font-size:18px;}
.tq-whiteboard-ai{display:grid;gap:12px;padding:14px;border:1px solid rgba(108,92,231,.16);border-radius:22px;background:radial-gradient(circle at 8% 0,rgba(108,92,231,.12),transparent 34%),linear-gradient(135deg,#fff,#fff7ed);box-shadow:0 18px 50px rgba(15,23,42,.09);}
.tq-wb-ai-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;}
.tq-wb-ai-head strong{display:block;font-family:var(--font-head);font-size:20px;letter-spacing:-.03em;color:var(--text);}
.tq-wb-ai-head span{display:block;margin-top:3px;color:var(--text-3);font-size:13px;font-weight:700;}
.tq-wb-ai-pill{flex-shrink:0;padding:7px 10px;border-radius:999px;background:var(--text);color:#fff!important;font-size:10px!important;font-weight:900;text-transform:uppercase;letter-spacing:.08em;}
.tq-wb-ai-row{display:grid;grid-template-columns:minmax(220px,1fr) 1.75fr;gap:12px;align-items:stretch;}
#tq-wb-ai-prompt{width:100%;min-height:92px;resize:vertical;border:1px solid rgba(15,23,42,.12);border-radius:18px;background:rgba(255,255,255,.88);padding:14px 15px;font:inherit;font-weight:700;color:var(--text);box-shadow:inset 0 1px 0 rgba(255,255,255,.7);}
#tq-wb-ai-prompt:focus{outline:3px solid rgba(108,92,231,.16);border-color:rgba(108,92,231,.45);}
.tq-wb-ai-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.tq-wb-ai-btn{border:1px solid rgba(15,23,42,.1);border-radius:15px;background:#fff;color:var(--text);padding:10px 11px;font-size:12px;font-weight:900;cursor:pointer;box-shadow:0 8px 20px rgba(15,23,42,.06);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;}
.tq-wb-ai-btn:hover{transform:translateY(-1px);border-color:rgba(108,92,231,.3);box-shadow:0 12px 28px rgba(108,92,231,.12);}
.tq-wb-ai-btn-magic{background:linear-gradient(135deg,var(--text),#7f1d1d);color:#fff;border-color:rgba(255,255,255,.18);}
.tq-wb-ai-result{border-top:1px dashed rgba(15,23,42,.14);padding-top:12px;}
.tq-wb-ai-output-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px;}
.tq-wb-ai-output-head b{display:block;font-family:var(--font-head);font-size:18px;color:var(--text);}
.tq-wb-ai-output-head span{display:block;color:var(--text-3);font-size:12px;font-weight:700;margin-top:2px;}
.tq-wb-ai-add-all,.tq-wb-ai-add-one{border:0;border-radius:999px;background:var(--red);color:#fff;padding:8px 12px;font-size:11px;font-weight:900;cursor:pointer;box-shadow:0 8px 22px rgba(108,92,231,.2);}
.tq-wb-ai-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;}
.tq-wb-ai-card{display:flex;flex-direction:column;gap:7px;min-height:150px;padding:12px;border-radius:18px;background:rgba(255,255,255,.9);border:1px solid rgba(15,23,42,.1);box-shadow:0 10px 26px rgba(15,23,42,.07);}
.tq-wb-ai-card small{width:max-content;padding:4px 8px;border-radius:999px;background:#FEF3C7;color:#92400E;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;}
.tq-wb-ai-card strong{font-family:var(--font-head);font-size:15px;color:var(--text);}
.tq-wb-ai-card p{flex:1;margin:0;color:var(--text-2);font-size:12.5px;line-height:1.45;font-weight:700;}
.tq-wb-ai-card-actions small{background:#DBEAFE;color:#1D4ED8;}
.tq-wb-ai-card-wow{background:linear-gradient(135deg,#fff,#F1EFFD);border-color:rgba(108,92,231,.18);}
.tq-wb-ai-card-wow small{background:#EDEBFE;color:#5546D6;}
.tq-wb-item-ai{background:linear-gradient(135deg,#fff7ed,#fff);border-color:#FDBA74;box-shadow:0 16px 42px rgba(234,88,12,.16);}
/* Color-coded AI cards on board */
.tq-wb-item-interactive::before{content:'👆';position:absolute;top:-8px;right:-8px;font-size:16px;background:#fff;border-radius:50%;padding:2px;box-shadow:0 2px 8px rgba(0,0,0,.15);pointer-events:none;}
/* AI result card colors */
.tq-wb-ai-card-yellow{background:#FFFBEB;border-color:#F59E0B;}
.tq-wb-ai-card-yellow small{background:#FEF3C7;color:#92400E;}
.tq-wb-ai-card-blue{background:#EFF6FF;border-color:#3B82F6;}
.tq-wb-ai-card-blue small{background:#DBEAFE;color:#1D4ED8;}
.tq-wb-ai-card-green{background:#F0FDF4;border-color:#059669;}
.tq-wb-ai-card-green small{background:#D1FAE5;color:#065F46;}
.tq-wb-ai-card-red{background:#FFF1F2;border-color:#EF4444;}
.tq-wb-ai-card-red small{background:#EDEBFE;color:#5546D6;}
.tq-wb-ai-card-purple{background:#FAF5FF;border-color:#7C3AED;}
.tq-wb-ai-card-purple small{background:#EDE9FE;color:#5B21B6;}
/* AI card meta row */
.tq-wb-ai-card-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.tq-wb-ai-interactive-badge{font-size:9px;font-weight:900;background:var(--text);color:#fff;padding:3px 7px;border-radius:999px;letter-spacing:.05em;}
/* Teacher tip */
.tq-wb-ai-tip{background:#EFF6FF;border:1px solid #BFDBFE;border-radius:14px;padding:10px 12px;font-size:12px;font-weight:700;color:#1E40AF;margin-bottom:10px;line-height:1.45;}
.tq-wb-ai-tip strong{color:#1D4ED8;}
/* Text field item on board */
.tq-wb-item-text{background:#FAFAFA;border:2px dashed rgba(15,23,42,.2);min-width:160px;min-height:60px;padding:6px 8px 10px;}
.tq-wb-item-textfield{min-width:130px;min-height:36px;font-size:22px;font-weight:800;color:var(--text);outline:none;line-height:1.2;word-break:break-word;font-family:var(--font-head);}
.tq-wb-item-textfield:empty::before{content:attr(data-placeholder);color:rgba(15,23,42,.25);pointer-events:none;}
.tq-wb-text-size-bar{display:flex;gap:3px;margin-bottom:4px;}
.tq-wb-txt-sz{background:transparent;border:1px solid rgba(15,23,42,.15);border-radius:7px;padding:2px 6px;font-size:10px;font-weight:900;cursor:pointer;color:var(--text-2);}
.tq-wb-txt-sz.active,.tq-wb-txt-sz:hover{background:var(--text);color:#fff;border-color:var(--text);}
.tq-whiteboard-stage{position:relative;min-height:clamp(520px,68vh,860px);border-radius:24px;overflow:hidden;border:2px solid rgba(15,23,42,.12);background:linear-gradient(rgba(37,99,235,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.055) 1px,transparent 1px),#fff;background-size:34px 34px;box-shadow:0 24px 70px rgba(15,23,42,.13);touch-action:none;}
.tq-whiteboard-stage.tq-wb-bg-blank{background:#fff;}
.tq-whiteboard-stage.tq-wb-bg-grid{background:linear-gradient(rgba(37,99,235,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.055) 1px,transparent 1px),#fff;background-size:34px 34px;}
.tq-whiteboard-stage.tq-wb-bg-lines{background:repeating-linear-gradient(0deg,#fff 0,#fff 37px,rgba(37,99,235,.16) 38px);}
.tq-whiteboard-stage.tq-wb-bg-spanish{background:linear-gradient(180deg,rgba(198,15,15,.11) 0 18%,rgba(255,196,0,.13) 18% 82%,rgba(198,15,15,.11) 82% 100%),#fff;}
.tq-whiteboard-stage.tq-wb-bg-grammar{background:linear-gradient(90deg,rgba(108,92,231,.08) 0 25%,transparent 25%),repeating-linear-gradient(0deg,#fff 0,#fff 43px,rgba(15,23,42,.08) 44px);}
#tq-whiteboard-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair;}
.tq-whiteboard-elements{position:absolute;inset:0;pointer-events:none;}
.tq-whiteboard-empty{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;color:rgba(15,23,42,.32);pointer-events:none;}
.tq-whiteboard-empty strong{display:block;font-family:var(--font-head);font-size:clamp(34px,5vw,64px);letter-spacing:-.04em;}
.tq-whiteboard-empty span{display:block;margin-top:4px;font-size:14px;font-weight:800;}
.tq-wb-item{position:absolute;min-width:170px;max-width:min(360px,72vw);padding:14px 16px;border-radius:18px;background:#FFFBEB;border:1px solid #FCD34D;box-shadow:0 14px 36px rgba(15,23,42,.16);color:var(--text);font-weight:800;cursor:grab;pointer-events:auto;user-select:none;touch-action:none;}
.tq-wb-item:active{cursor:grabbing;}
.tq-wb-item-card{background:linear-gradient(135deg,#EFF6FF,#fff);border-color:#93C5FD;}
.tq-wb-item-lib{background:linear-gradient(135deg,#F5F3FF,#fff);border-color:#C4B5FD;}
.tq-wb-item-stamp{min-width:70px;max-width:120px;padding:10px 12px;text-align:center;font-size:42px;background:rgba(255,255,255,.82);border-color:rgba(15,23,42,.1);}
.tq-wb-item-stamp .tq-wb-item-title{font-size:42px;line-height:1;margin:0;}
.tq-wb-item-stamp .tq-wb-item-body{display:none;}
.tq-wb-item-template{background:linear-gradient(135deg,#ECFDF5,#fff);border-color:#6EE7B7;}
.tq-wb-item-title{display:block;font-family:var(--font-head);font-size:18px;margin-bottom:4px;}
.tq-wb-item-body{display:block;white-space:pre-wrap;line-height:1.35;font-size:14px;}
.tq-wb-item-body[contenteditable="true"],.tq-wb-item-title[contenteditable="true"]{outline:0;}
.tq-wb-item-body[contenteditable="true"]:focus,.tq-wb-item-title[contenteditable="true"]:focus{background:rgba(255,255,255,.58);border-radius:8px;}
.tq-wb-item-close{position:absolute;top:6px;right:8px;border:0;background:transparent;color:rgba(15,23,42,.45);font-weight:900;cursor:pointer;}
.tq-wb-timer-card{position:absolute;right:18px;top:18px;z-index:4;min-width:150px;padding:14px 16px;border-radius:20px;background:rgba(17,24,39,.9);color:#fff;text-align:center;box-shadow:0 18px 48px rgba(15,23,42,.28);pointer-events:auto;}
.tq-wb-timer-card strong{display:block;font-family:var(--font-head);font-size:38px;line-height:1;color:#FDE68A;}
.tq-wb-timer-card span{display:block;margin-top:4px;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.66);}
.tq-wb-timer-card.done{background:linear-gradient(135deg,#991B1B,#6C5CE7);animation:tqWbTimerPulse .65s ease infinite alternate;}
@keyframes tqWbTimerPulse{from{transform:scale(1)}to{transform:scale(1.045)}}
.tq-whiteboard-library{position:absolute;right:14px;top:72px;z-index:6;width:min(420px,calc(100% - 28px));max-height:70vh;overflow:auto;border-radius:18px;border:1px solid var(--border);background:rgba(255,255,255,.96);box-shadow:0 24px 70px rgba(15,23,42,.22);}
.tq-wb-lib-head{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;background:#fff;border-bottom:1px solid var(--border);}
.tq-wb-lib-head button{border:0;background:var(--surface-2);border-radius:50%;width:28px;height:28px;cursor:pointer;font-size:18px;}
.tq-wb-library-list{display:grid;gap:8px;padding:12px;}
.tq-wb-lib-item{text-align:left;border:1px solid var(--border);border-radius:14px;background:var(--surface-2);padding:11px 12px;cursor:pointer;}
.tq-wb-lib-item strong{display:block;color:var(--text);font-size:13px;}
.tq-wb-lib-item span{display:block;color:var(--text-3);font-size:11px;margin-top:3px;}
@media (max-width:720px){
  .tq-whiteboard-intro{align-items:flex-start;flex-direction:column;}
  .tq-wb-actions{margin-left:0;width:100%;}
  .tq-whiteboard-toolbar .pedro-btn,.tq-whiteboard-toolbar .pedro-btn-secondary{flex:1 1 auto;}
  .tq-wb-ai-head{flex-direction:column;}
  .tq-wb-ai-row{grid-template-columns:1fr;}
  .tq-wb-ai-actions{grid-template-columns:repeat(2,minmax(0,1fr));}
  .tq-whiteboard-stage{min-height:66vh;border-radius:18px;}
  .tq-wb-save-status{width:100%;margin-left:0;}
}

/* Pizarra inteligente: layout práctico y menos abrumador */
.pedro-whiteboard-panel-wrapper .tq-whiteboard-intro{padding:14px 16px;}
.pedro-whiteboard-panel-wrapper .pedro-card-title{margin-bottom:2px;}
.tq-wb-command-bar{position:relative;z-index:3;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px;border:1px solid rgba(15,23,42,.1);border-radius:22px;background:rgba(255,255,255,.9);box-shadow:0 14px 36px rgba(15,23,42,.08);backdrop-filter:blur(10px);}
.tq-wb-command-section{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:6px 8px;border-radius:16px;background:rgba(248,250,252,.78);border:1px solid rgba(15,23,42,.06);}
.tq-wb-command-label{font-size:10px;font-weight:950;text-transform:uppercase;letter-spacing:.09em;color:var(--text-3);margin-right:2px;}
.tq-wb-command-main{margin-left:auto;background:transparent;border-color:transparent;padding-right:0;}
.tq-wb-command-bar .tq-wb-tool{min-width:38px;min-height:38px;padding:8px 10px;border-radius:14px;font-size:12px;}
.tq-wb-command-bar .tq-wb-color{width:28px;height:28px;border-width:2px;}
.tq-wb-command-bar .pedro-btn,.tq-wb-command-bar .pedro-btn-secondary{min-height:38px;padding:8px 12px;border-radius:14px;font-size:12px;font-weight:900;}
.tq-wb-command-settings{flex:1 1 250px;}
.tq-wb-command-settings .tq-wb-size{flex:1 1 130px;}
.tq-wb-command-settings .tq-wb-size input{width:100%;min-width:96px;}
.tq-wb-command-settings .tq-wb-bg{min-width:116px;border-radius:14px;}
.tq-wb-save-status{align-self:center;width:auto!important;min-width:96px;margin-left:0;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;}
.tq-wb-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);gap:14px;align-items:stretch;}
.tq-wb-workspace .tq-whiteboard-stage{min-height:clamp(650px,calc(100vh - 245px),980px);height:auto;border-radius:26px;}
.tq-wb-dock{display:flex;flex-direction:column;gap:10px;min-height:0;overflow-y:auto;overflow-x:hidden;max-height:clamp(600px,calc(100vh - 200px),1080px);align-self:start;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.18) transparent;padding-right:2px;}
.tq-wb-dock-panel{border:1px solid rgba(15,23,42,.1);border-radius:20px;background:rgba(255,255,255,.92);box-shadow:0 12px 30px rgba(15,23,42,.07);overflow:hidden;}
.tq-wb-dock-panel summary{display:flex;align-items:center;justify-content:space-between;gap:10px;list-style:none;cursor:pointer;padding:13px 14px;user-select:none;}
.tq-wb-dock-panel summary::-webkit-details-marker{display:none;}
.tq-wb-dock-panel summary span{font-family:var(--font-head);font-size:15px;font-weight:900;color:var(--text);}
.tq-wb-dock-panel summary small{font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);text-align:right;}
.tq-wb-dock-panel summary:after{content:'+';display:grid;place-items:center;flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:var(--surface-2);color:var(--text-2);font-weight:950;}
.tq-wb-dock-panel[open] summary{border-bottom:1px solid rgba(15,23,42,.08);}
.tq-wb-dock-panel[open] summary:after{content:'-';background:var(--text);color:#fff;}
.tq-wb-dock-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px;}
.tq-wb-dock-grid .pedro-btn-secondary{min-height:40px;border-radius:14px;font-size:12px;font-weight:900;}
.tq-wb-dock-grid #tq-wb-library,.tq-wb-dock-grid .tq-wb-template:last-child{grid-column:1/-1;}
.tq-wb-dock .tq-whiteboard-ai{padding:12px;border:0;border-radius:0;background:linear-gradient(180deg,#fff7ed,#fff);box-shadow:none;}
.tq-wb-dock .tq-wb-ai-head{margin-bottom:8px;}
.tq-wb-dock .tq-wb-ai-head strong{font-size:16px;}
.tq-wb-dock .tq-wb-ai-head span{font-size:11px;}
.tq-wb-dock #tq-wb-ai-prompt{min-height:82px;padding:11px 12px;border-radius:15px;font-size:13px;}
.tq-wb-dock .tq-wb-ai-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:9px;}
.tq-wb-dock .tq-wb-ai-btn{min-height:38px;padding:8px 9px;border-radius:13px;font-size:11.5px;}
.tq-wb-dock .tq-wb-ai-result{margin-top:10px;padding-top:10px;max-height:420px;overflow:auto;}
.tq-wb-dock .tq-wb-ai-output-head{align-items:stretch;flex-direction:column;}
.tq-wb-dock .tq-wb-ai-cards{grid-template-columns:1fr;}
.tq-wb-dock .tq-wb-ai-card{min-height:0;padding:11px;border-radius:15px;}
.tq-wb-dock .tq-whiteboard-quickbar{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:12px;border:0;border-radius:0;background:transparent;}
.tq-wb-dock .tq-wb-stamp{width:100%;height:40px;border-radius:14px;}
.tq-whiteboard-library{top:74px;right:12px;}
@media (max-width:1180px){
  .tq-wb-workspace{grid-template-columns:1fr;}
  .tq-wb-dock{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}
  .tq-wb-dock-ai{grid-column:1/-1;}
  .tq-wb-workspace .tq-whiteboard-stage{min-height:clamp(560px,62vh,820px);}
}
@media (max-width:720px){
  .pedro-whiteboard-panel-wrapper .tq-whiteboard-intro{padding:12px;}
  .tq-whiteboard-badge{display:none;}
  .tq-wb-command-bar{gap:8px;padding:8px;border-radius:18px;}
  .tq-wb-command-section{width:100%;justify-content:flex-start;padding:6px;}
  .tq-wb-command-tools{overflow-x:auto;flex-wrap:nowrap;}
  .tq-wb-command-tools .tq-wb-tool{flex:0 0 auto;}
  .tq-wb-command-main{margin-left:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));}
  .tq-wb-command-main .pedro-btn,.tq-wb-command-main .pedro-btn-secondary{padding:8px 6px;font-size:11px;}
  .tq-wb-save-status{grid-column:1/-1;min-height:14px;}
  .tq-wb-workspace{gap:10px;}
  .tq-wb-workspace .tq-whiteboard-stage{min-height:58vh;border-radius:18px;}
  .tq-wb-dock{display:flex;}
  .tq-wb-dock-panel summary{padding:11px 12px;}
  .tq-wb-dock-panel summary small{display:none;}
  .tq-wb-dock .tq-wb-ai-actions,.tq-wb-dock-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .tq-wb-dock .tq-whiteboard-quickbar{grid-template-columns:repeat(3,1fr);}
}

/* ── Asistente Monitor ─────────────────────────────── */
.tq-wb-monitor-wrap{padding:12px;display:flex;flex-direction:column;gap:8px;}
.tq-wb-monitor-status{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:900;color:var(--text-2);}
.tq-wb-monitor-dot{width:8px;height:8px;border-radius:50%;background:#10B981;flex-shrink:0;}
.tq-wb-monitor-dot.pulsing{animation:monitor-pulse 1s ease-in-out infinite;}
@keyframes monitor-pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(.7);}}
.tq-wb-monitor-empty{color:var(--text-3);font-size:11.5px;font-weight:700;line-height:1.45;margin:0;padding:4px 0;}
.tq-wb-monitor-card{border-radius:12px;padding:9px 11px;margin-bottom:2px;}
.monitor-ok{background:#F0FDF4;border:1px solid #86EFAC;}
.monitor-tip{background:#FFFBEB;border:1px solid #FCD34D;}
.monitor-warn{background:#FEF2F2;border:1px solid #FCA5A5;}
.monitor-blank{background:var(--bg);border:1px dashed rgba(15,23,42,.15);}
.tq-wb-monitor-read{font-size:12px;font-weight:700;color:var(--text);line-height:1.4;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.tq-wb-monitor-level{font-size:9px;font-weight:900;background:var(--text);color:#fff;padding:2px 7px;border-radius:999px;letter-spacing:.06em;flex-shrink:0;}
.tq-wb-monitor-block{border-radius:12px;padding:9px 11px;background:#fff;border:1px solid rgba(15,23,42,.08);display:flex;flex-direction:column;gap:5px;}
.tq-wb-monitor-block strong{font-size:10.5px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;color:var(--text-2);}
.tq-wb-monitor-block p{margin:0;font-size:12px;font-weight:700;color:var(--text);line-height:1.45;}
.tq-wb-monitor-next{border-left:3px solid #3B82F6;}
.tq-wb-monitor-qw{border-left:3px solid #10B981;}
.tq-wb-monitor-missed{border-left:3px solid #F59E0B;}
.tq-wb-monitor-add{align-self:flex-start;border:0;background:var(--red);color:#fff;border-radius:999px;padding:5px 10px;font-size:10px;font-weight:900;cursor:pointer;margin-top:2px;}
.tq-wb-monitor-refresh-btn{width:100%;min-height:36px;border-radius:12px;font-size:11.5px;font-weight:900;}
/* ── end monitor ─────────────────────────────── */
#pedro-ai-app.pedro-whiteboard-mode .pedro-wow-layout{grid-template-columns:minmax(0,1fr)!important;gap:0!important;padding:6px!important;}
#pedro-ai-app.pedro-whiteboard-mode .pedro-wow-sidebar{position:fixed!important;top:0!important;left:0!important;bottom:0!important;width:min(320px,86vw)!important;max-width:86vw!important;z-index:2147483640!important;transform:translateX(-106%)!important;transition:transform .24s cubic-bezier(.4,0,.2,1)!important;border-radius:0 24px 24px 0!important;overflow-y:auto!important;}
#pedro-ai-app.pedro-whiteboard-mode .pedro-wow-sidebar.pedro-mobile-open{transform:translateX(0)!important;}
#pedro-ai-app.pedro-whiteboard-mode .pedro-mobile-backdrop.pedro-mobile-open{display:block!important;position:fixed;inset:0;z-index:2147483639;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);}
#pedro-ai-app.pedro-whiteboard-mode .pedro-hamburger{display:flex!important;}
#pedro-ai-app.pedro-whiteboard-mode .pedro-wow-main{gap:6px!important;}
#pedro-ai-app.pedro-whiteboard-mode .pedro-wow-topbar{padding:3px 6px 2px!important;min-height:38px!important;}
#pedro-ai-app.pedro-whiteboard-mode .pedro-wow-workspace{padding:0!important;border-radius:18px!important;}
#pedro-ai-app.pedro-whiteboard-mode #pedro-whiteboard-panel.active{display:flex!important;flex-direction:column;height:100%;min-height:0;}
#pedro-ai-app.pedro-whiteboard-mode #pedro-whiteboard-panel .pedro-wow-panel-stage{padding:8px!important;overflow:hidden!important;height:100%;min-height:0;}
#pedro-ai-app.pedro-whiteboard-mode .pedro-whiteboard-panel-wrapper{display:flex;flex-direction:column;min-height:0;height:100%;}
#pedro-ai-app.pedro-whiteboard-mode .pedro-whiteboard-panel-wrapper .tq-whiteboard-intro{display:none!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-whiteboard-shell{flex:1;min-height:0;margin-top:0;gap:8px;}
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-command-bar{padding:8px;border-radius:18px;box-shadow:0 10px 28px rgba(15,23,42,.07);}
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-command-main .pedro-btn-secondary,#pedro-ai-app.pedro-whiteboard-mode .tq-wb-command-main .pedro-btn{min-height:34px;padding:7px 10px;}
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-workspace{flex:1;min-height:0;grid-template-columns:minmax(0,1fr) minmax(250px,300px);gap:10px;align-items:start;}
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-workspace .tq-whiteboard-stage{height:100%;min-height:clamp(620px,calc(100vh - 126px),1080px);border-radius:22px;}
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-dock{min-height:0;height:100%;max-height:clamp(620px,calc(100vh - 130px),1080px);overflow-y:auto;overflow-x:hidden;align-self:stretch;padding-right:3px;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent;}
.pedro-whiteboard-panel-wrapper.tq-wb-dock-hidden .tq-wb-workspace{grid-template-columns:minmax(0,1fr)!important;}
.pedro-whiteboard-panel-wrapper.tq-wb-dock-hidden .tq-wb-dock{display:none!important;}
#pedro-ai-app.pedro-whiteboard-mode .pedro-whiteboard-panel-wrapper.tq-wb-dock-hidden .tq-whiteboard-stage{min-height:clamp(680px,calc(100vh - 118px),1120px);}
@media (max-width:900px){
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-workspace{grid-template-columns:1fr;}
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-dock{display:grid;grid-template-columns:1fr 1fr;overflow:visible;padding-right:0;}
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-dock-ai{grid-column:1/-1;}
}
@media (max-width:720px){
  #pedro-ai-app.pedro-whiteboard-mode .pedro-wow-layout{padding:0!important;}
  #pedro-ai-app.pedro-whiteboard-mode .pedro-wow-topbar{padding:5px 8px 3px!important;}
  #pedro-ai-app.pedro-whiteboard-mode #pedro-whiteboard-panel .pedro-wow-panel-stage{padding:6px!important;overflow:auto!important;}
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-command-main{grid-template-columns:repeat(5,minmax(0,1fr));}
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-command-main .pedro-btn-secondary,#pedro-ai-app.pedro-whiteboard-mode .tq-wb-command-main .pedro-btn{font-size:10.5px;padding:7px 4px;}
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-workspace .tq-whiteboard-stage{min-height:62vh;}
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-dock{display:flex;}
  #pedro-ai-app.pedro-whiteboard-mode .pedro-whiteboard-panel-wrapper.tq-wb-dock-hidden .tq-whiteboard-stage{min-height:72vh;}
}


/* PATCH 2026-05-05: Whiteboard UX rescue — less cramped dock, reliable scroll, canvas vision handoff */
.tq-wb-command-bar{position:sticky;top:0;z-index:5;align-items:flex-start;}
.tq-wb-command-section{min-width:0;}
.tq-wb-command-tools,.tq-wb-colors,.tq-wb-command-settings,.tq-wb-command-main{overflow-x:auto;scrollbar-width:thin;}
.tq-wb-command-main{display:flex;flex-wrap:nowrap;}
.tq-wb-command-main .pedro-btn,.tq-wb-command-main .pedro-btn-secondary{white-space:nowrap;}
.tq-wb-dock{display:flex;flex-direction:column;gap:10px;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
.tq-wb-dock-panel{flex:0 0 auto;}
.tq-wb-dock-panel:not([open]) summary{border-bottom:0;}
.tq-wb-ai-btn-magic{background:linear-gradient(135deg,var(--text),#7C3AED)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 10px 24px rgba(124,58,237,.22)!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-workspace{align-items:stretch;}
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-dock{max-height:calc(100vh - 138px)!important;padding-bottom:18px;}
#pedro-ai-app.pedro-whiteboard-mode #pedro-whiteboard-panel .pedro-wow-panel-stage{overflow:hidden auto!important;}
@media (max-width:1180px){
  .tq-wb-dock{max-height:42vh;}
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-dock{display:flex!important;max-height:38vh!important;overflow-y:auto!important;}
}
@media (max-width:720px){
  .tq-wb-command-bar{position:relative;}
  .tq-wb-command-main{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));}
  .tq-wb-dock{max-height:none;overflow:visible;}
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-dock{max-height:none!important;overflow:visible!important;}
}

/* v5.6.1 — Whiteboard dock scroll + Teeqo Studio rebuild */
#pedro-ai-app.pedro-css-fullscreen,
#pedro-ai-app:fullscreen,
#pedro-ai-app:-webkit-full-screen{
  position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;margin:0!important;border-radius:0!important;background:var(--bg)!important;z-index:2147483647!important;
}
#pedro-ai-app.pedro-whiteboard-mode #pedro-whiteboard-panel.active{height:100%!important;overflow:hidden!important;}
#pedro-ai-app.pedro-whiteboard-mode #pedro-whiteboard-panel .pedro-wow-panel-stage{height:100%!important;overflow:hidden!important;min-height:0!important;}
#pedro-ai-app.pedro-whiteboard-mode .pedro-whiteboard-panel-wrapper{height:100%!important;min-height:0!important;overflow:hidden!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-whiteboard-shell{height:100%!important;min-height:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-command-bar{flex:0 0 auto!important;overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:thin!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-workspace{flex:1 1 auto!important;min-height:0!important;height:auto!important;overflow:hidden!important;align-items:stretch!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-workspace .tq-whiteboard-stage{height:100%!important;min-height:0!important;overflow:hidden!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-dock{
  height:100%!important;max-height:none!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;align-self:stretch!important;padding:0 8px 110px 0!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior:contain!important;scrollbar-width:thin!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-dock:after{content:'';display:block;height:72px;flex:0 0 72px;}
.tq-wb-studio{background:linear-gradient(180deg,#fff7ed 0,#fff 52%,#eef2ff 100%)!important;}
.tq-wb-studio-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.tq-wb-studio-primary{grid-column:1/-1;background:var(--text)!important;color:#fff!important;border-color:var(--text)!important;box-shadow:0 12px 24px rgba(17,24,39,.18)!important;}
.tq-wb-studio-note{font-size:11px;line-height:1.35;font-weight:800;color:var(--text-3);background:rgba(255,255,255,.72);border:1px dashed rgba(15,23,42,.16);padding:9px 10px;border-radius:14px;}
.tq-wb-studio-output-head{position:sticky;top:0;z-index:3;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);padding-bottom:8px;}
.tq-wb-flow{display:grid;gap:6px;margin:8px 0 10px;padding:10px;border-radius:16px;background:var(--bg);border:1px solid rgba(15,23,42,.08);font-size:12px;}
.tq-wb-flow strong{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);}
.tq-wb-flow span{display:flex;gap:8px;align-items:flex-start;color:var(--text);font-weight:700;line-height:1.35;}
.tq-wb-flow b{display:grid;place-items:center;flex:0 0 20px;width:20px;height:20px;border-radius:50%;background:var(--text);color:#fff;font-size:11px;}
.tq-wb-ai-visual{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;background:rgba(255,255,255,.65);border:1px solid rgba(15,23,42,.08);border-radius:12px;padding:8px;margin:7px 0;font-size:12px;font-weight:800;color:var(--text);}
.tq-wb-studio-cards .tq-wb-ai-card em{display:block;margin-top:7px;font-style:normal;font-size:11.5px;font-weight:900;color:var(--text-3);background:rgba(255,255,255,.55);border-radius:10px;padding:7px;}
.tq-wb-ai-warning{border-color:#F59E0B!important;background:#FFFBEB!important;color:#92400E!important;}
.tq-wb-item-ai{box-shadow:0 18px 40px rgba(15,23,42,.14)!important;min-width:190px;max-width:330px;}
.tq-wb-item-interactive:before{content:'👆 interactivo';position:absolute;right:10px;top:-13px;padding:3px 8px;border-radius:999px;background:var(--text);color:#fff;font-size:10px;font-weight:950;letter-spacing:.02em;}
.tq-wb-item-scoreboard .tq-wb-item-body{display:grid!important;grid-template-columns:1fr auto;gap:8px;align-items:center;}
.tq-wb-item-scoreboard .tq-score{border:0;border-radius:12px;padding:8px 10px;background:var(--text);color:#fff;font-weight:950;cursor:pointer;}
.tq-wb-item-scoreboard .tq-score-number{font-size:28px;font-family:var(--font-head);}
@media (max-width: 1100px){
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-workspace{grid-template-columns:1fr minmax(230px,280px)!important;}
}
@media (max-width: 820px){
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-workspace{display:flex!important;flex-direction:column!important;overflow:hidden!important;}
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-workspace .tq-whiteboard-stage{flex:1 1 58%!important;min-height:48vh!important;}
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-dock{flex:0 0 36vh!important;display:flex!important;max-height:none!important;overflow-y:auto!important;padding-bottom:90px!important;}
  .tq-wb-studio-modes{grid-template-columns:1fr;}
}

/* v5.6.2 — Critical repair: real fullscreen fallback + lateral dock scroll + interactive AI widgets */
#pedro-fullscreen-btn[aria-pressed="true"]{background:var(--text)!important;color:#fff!important;border-color:var(--text)!important;}
#pedro-ai-app.pedro-css-fullscreen{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;margin:0!important;border-radius:0!important;background:var(--bg)!important;z-index:2147483647!important;}
#pedro-ai-app:fullscreen{background:var(--bg)!important;overflow:hidden!important;}
#pedro-ai-app:-webkit-full-screen{background:var(--bg)!important;overflow:hidden!important;}
html.pedro-ai-lock-scroll,body.pedro-ai-lock-scroll{overflow:hidden!important;overscroll-behavior:none!important;}

#pedro-ai-app.pedro-whiteboard-mode #pedro-whiteboard-panel.active,
#pedro-ai-app.pedro-whiteboard-mode #pedro-whiteboard-panel .pedro-wow-panel-stage,
#pedro-ai-app.pedro-whiteboard-mode .pedro-whiteboard-panel-wrapper,
#pedro-ai-app.pedro-whiteboard-mode .tq-whiteboard-shell{height:100%!important;min-height:0!important;overflow:hidden!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-whiteboard-shell{display:flex!important;flex-direction:column!important;gap:8px!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-command-bar{flex:0 0 auto!important;min-height:0!important;overflow-x:auto!important;overflow-y:hidden!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-workspace{flex:1 1 auto!important;min-height:0!important;height:auto!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(320px,390px)!important;gap:12px!important;align-items:stretch!important;overflow:hidden!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-workspace .tq-whiteboard-stage{height:100%!important;min-height:0!important;max-height:none!important;overflow:hidden!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-dock{height:100%!important;min-height:0!important;max-height:100%!important;display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;overflow-y:auto!important;overflow-x:hidden!important;align-self:stretch!important;padding:0 9px 170px 0!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior:contain!important;scrollbar-width:thin!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-dock .tq-wb-ai-result{max-height:none!important;overflow:visible!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-dock-panel{flex:0 0 auto!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-dock-panel:last-child{margin-bottom:120px!important;}
@media (max-width:1100px){#pedro-ai-app.pedro-whiteboard-mode .tq-wb-workspace{grid-template-columns:minmax(0,1fr) minmax(280px,330px)!important;}}
@media (max-width:820px){
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-workspace{display:flex!important;flex-direction:column!important;overflow:hidden!important;}
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-workspace .tq-whiteboard-stage{flex:1 1 auto!important;min-height:0!important;}
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-dock{flex:0 0 42vh!important;height:42vh!important;max-height:42vh!important;overflow-y:auto!important;padding-bottom:150px!important;}
}

.tq-wb-studio-modes{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
.tq-wb-studio-modes .tq-wb-studio-primary{grid-column:auto!important;}
.tq-wb-studio-modes .tq-wb-ai-btn{min-height:44px!important;white-space:normal!important;line-height:1.12!important;}
.tq-ai-widget-body{display:block!important;white-space:normal!important;line-height:1.25!important;}
.tq-wb-item-widget,.tq-wb-widget-vocab,.tq-wb-widget-verbs,.tq-wb-widget-choice,.tq-wb-widget-match{min-width:300px!important;max-width:min(620px,92vw)!important;}
.tq-ai-widget{display:grid;gap:10px;user-select:none;}
.tq-widget-help{font-size:11px;font-weight:900;color:var(--text-3);background:rgba(255,255,255,.68);border:1px dashed rgba(15,23,42,.14);border-radius:12px;padding:7px 9px;}
.tq-vocab-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.tq-vocab-card{border:1px solid rgba(15,23,42,.12);border-radius:16px;background:#fff;padding:10px;display:grid;gap:3px;text-align:left;cursor:pointer;box-shadow:0 8px 18px rgba(15,23,42,.08);}
.tq-vocab-card .tq-vocab-emoji{font-size:30px;line-height:1;}
.tq-vocab-card strong{font-family:var(--font-head);font-size:17px;color:var(--text);}
.tq-vocab-card small,.tq-vocab-card em{display:none;color:var(--text-2);font-size:12px;font-weight:850;font-style:normal;}
.tq-vocab-card.is-open small,.tq-vocab-card.is-open em{display:block;}
.tq-vocab-card.is-open{outline:3px solid rgba(37,99,235,.18);transform:translateY(-1px);}
.tq-verb-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.tq-verb-card{min-height:104px;border:0;border-radius:16px;background:var(--text);color:#fff;padding:11px;cursor:pointer;text-align:left;box-shadow:0 12px 24px rgba(15,23,42,.16);}
.tq-verb-card .tq-verb-front,.tq-verb-card .tq-verb-back{display:grid;gap:6px;}
.tq-verb-card b{font-family:var(--font-head);font-size:21px;}
.tq-verb-card small{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#cbd5e1;font-weight:900;}
.tq-verb-card .tq-verb-back{display:none;font-size:12px;font-weight:900;line-height:1.35;}
.tq-verb-card .tq-verb-back em,.tq-verb-card .tq-verb-back i{display:block;margin-top:5px;font-style:normal;color:#fde68a;}
.tq-verb-card.is-flipped{background:#7c3aed;}
.tq-verb-card.is-flipped .tq-verb-front{display:none;}
.tq-verb-card.is-flipped .tq-verb-back{display:grid;}
.tq-choice-game{min-width:280px;}
.tq-choice-top{display:flex;justify-content:space-between;gap:10px;font-size:12px;font-weight:950;color:var(--text-2);}
.tq-choice-prompt{font-family:var(--font-head);font-size:18px;font-weight:950;color:var(--text);background:rgba(255,255,255,.72);border-radius:14px;padding:10px;}
.tq-choice-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.tq-choice-option,.tq-choice-team,.tq-choice-next,.tq-match-token{border:1px solid rgba(15,23,42,.12);border-radius:14px;background:#fff;color:var(--text);padding:9px 10px;font-weight:950;cursor:pointer;box-shadow:0 6px 14px rgba(15,23,42,.07);}
.tq-choice-option.is-correct{background:#dcfce7;border-color:#22c55e;}
.tq-choice-option.is-wrong{background:#fee2e2;border-color:#ef4444;}
.tq-choice-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;}
.tq-choice-feedback,.tq-match-status{font-size:12px;font-weight:900;color:var(--text-2);background:rgba(255,255,255,.72);border-radius:12px;padding:8px;}
.tq-match-cols{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.tq-match-cols>div{display:grid;gap:7px;}
.tq-match-token.is-selected{outline:3px solid rgba(37,99,235,.25);background:#dbeafe;}
.tq-match-token.is-matched{background:#dcfce7;border-color:#22c55e;text-decoration:line-through;opacity:.72;}
.tq-match-token.is-wrong{background:#fee2e2;border-color:#ef4444;}
@media (max-width:520px){.tq-vocab-grid,.tq-verb-grid,.tq-choice-options{grid-template-columns:1fr;}.tq-choice-actions{grid-template-columns:1fr;}}

/* v6.19.4 — Whiteboard vitamin patch: cleaner Studio, hidden dock, safer scroll */
.tq-wb-toggle-dock-btn{font-weight:950!important;background:#fff!important;border-color:rgba(15,23,42,.16)!important;}
.tq-wb-toggle-dock-btn[aria-pressed="true"]{background:var(--text)!important;color:#fff!important;border-color:var(--text)!important;}
#pedro-ai-app.pedro-whiteboard-mode .pedro-whiteboard-panel-wrapper.tq-wb-dock-hidden .tq-wb-workspace{grid-template-columns:minmax(0,1fr)!important;}
#pedro-ai-app.pedro-whiteboard-mode .pedro-whiteboard-panel-wrapper.tq-wb-dock-hidden .tq-whiteboard-stage{height:100%!important;min-height:0!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-dock::after{content:'';display:block;flex:0 0 190px;width:1px;}
.tq-wb-studio-modes{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
.tq-wb-studio-modes .tq-wb-ai-btn[data-ai-mode="game"]{grid-column:1/-1!important;min-height:52px!important;font-size:13px!important;}
.tq-wb-studio-modes .tq-wb-ai-btn[data-ai-mode="vocab"],
.tq-wb-studio-modes .tq-wb-ai-btn[data-ai-mode="verbs"]{background:var(--text)!important;color:#fff!important;border-color:var(--text)!important;box-shadow:0 12px 26px rgba(15,23,42,.18)!important;}
.tq-wb-studio-note{background:var(--bg)!important;border-style:solid!important;color:var(--text-3)!important;}
.tq-wb-widget-choice{max-width:min(720px,94vw)!important;}
.tq-verb-card{transition:transform .16s ease, background .16s ease, box-shadow .16s ease;}
.tq-verb-card:hover{transform:translateY(-1px);box-shadow:0 16px 30px rgba(15,23,42,.2);}
@media (max-width:820px){#pedro-ai-app.pedro-whiteboard-mode .tq-wb-dock::after{flex-basis:220px;}}

/* v6.19.5 — Whiteboard polish: correct dock hiding, mode colors, resizable cards, richer verb widgets */
#pedro-ai-app.pedro-whiteboard-mode .pedro-whiteboard-panel-wrapper.tq-wb-dock-hidden .tq-wb-dock{display:none!important;visibility:hidden!important;}
#pedro-ai-app.pedro-whiteboard-mode .pedro-whiteboard-panel-wrapper.tq-wb-dock-hidden .tq-wb-workspace{grid-template-columns:minmax(0,1fr)!important;}
#pedro-ai-app.pedro-whiteboard-mode .pedro-whiteboard-panel-wrapper.tq-wb-dock-hidden .tq-whiteboard-stage{display:block!important;width:100%!important;height:100%!important;min-height:0!important;}
.tq-wb-studio-modes .tq-wb-ai-btn[data-ai-mode="vocab"]{background:linear-gradient(135deg,#059669,#10b981)!important;color:#fff!important;border-color:#047857!important;box-shadow:0 12px 26px rgba(5,150,105,.25)!important;}
.tq-wb-studio-modes .tq-wb-ai-btn[data-ai-mode="verbs"]{background:linear-gradient(135deg,#1d4ed8,#60a5fa)!important;color:#fff!important;border-color:#1d4ed8!important;box-shadow:0 12px 26px rgba(37,99,235,.24)!important;}
.tq-wb-studio-modes .tq-wb-ai-btn[data-ai-mode="game"]{background:linear-gradient(135deg,#065f46,#22c55e)!important;color:#fff!important;border-color:#047857!important;box-shadow:0 14px 30px rgba(5,150,105,.28)!important;}
.tq-wb-studio-modes .tq-wb-ai-btn[data-ai-mode="vocab"]::after,
.tq-wb-studio-modes .tq-wb-ai-btn[data-ai-mode="verbs"]::after,
.tq-wb-studio-modes .tq-wb-ai-btn[data-ai-mode="game"]::after{content:'4-5 opciones';display:block;margin-top:3px;font-size:9px;font-weight:950;letter-spacing:.06em;text-transform:uppercase;opacity:.82;}
.tq-wb-item{box-sizing:border-box;max-width:min(900px,96vw)!important;max-height:min(760px,92vh)!important;overflow:auto!important;resize:none;}
.tq-wb-item.is-resizing{cursor:nwse-resize!important;outline:3px solid rgba(17,24,39,.18);}
.tq-wb-resize-handle{position:absolute;right:5px;bottom:5px;width:18px;height:18px;border-radius:7px;background:linear-gradient(135deg,transparent 0 42%,rgba(15,23,42,.32) 43% 52%,transparent 53% 62%,rgba(15,23,42,.32) 63% 72%,transparent 73%);cursor:nwse-resize;pointer-events:auto;touch-action:none;opacity:.7;}
.tq-wb-resize-handle:hover{opacity:1;background-color:rgba(255,255,255,.72);}
.tq-wb-item-widget,.tq-wb-widget-vocab,.tq-wb-widget-verbs,.tq-wb-widget-choice,.tq-wb-widget-match{max-width:min(900px,96vw)!important;min-height:170px;}
.tq-wb-widget-vocab,.tq-wb-ai-type-visual_vocab{border-color:#059669!important;}
.tq-wb-widget-verbs,.tq-wb-ai-type-verb_deck{border-color:#3B82F6!important;}
.tq-wb-widget-choice,.tq-wb-widget-match,.tq-wb-ai-type-choice_game,.tq-wb-ai-type-matching_game{border-color:#059669!important;}
.tq-verb-card .tq-verb-front em{font-style:normal;font-size:10px;color:#bfdbfe;font-weight:950;text-transform:uppercase;letter-spacing:.06em;}
.tq-verb-forms{display:flex;flex-wrap:wrap;gap:5px;}
.tq-verb-form-chip{display:inline-flex;align-items:center;width:max-content;max-width:100%;padding:4px 7px;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font-size:11px;font-weight:950;}
.tq-verb-layout-ladder .tq-verb-grid{grid-template-columns:1fr!important;}
.tq-verb-layout-ladder .tq-verb-card{min-height:78px;background:linear-gradient(135deg,#1d4ed8,#0f172a);}
.tq-verb-layout-sentence_builder .tq-verb-card{background:linear-gradient(135deg,#2563eb,#7c3aed);}
.tq-verb-layout-error_hunt .tq-verb-card{background:linear-gradient(135deg,#1e40af,#b91c1c);}
.tq-verb-layout-timeline .tq-verb-card{background:linear-gradient(135deg,#0f172a,#0369a1);}
.tq-choice-game .tq-choice-live::before{content:'Juego con marcador integrado';display:block;margin-bottom:7px;padding:6px 8px;border-radius:999px;background:rgba(5,150,105,.12);color:#065f46;font-size:11px;font-weight:950;text-transform:uppercase;letter-spacing:.06em;}

/* v6.19.6 — Studio simplificado: dos botones rojos, paquetes conectados de vocabulario/verbos */
.tq-wb-studio-modes-two{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
.tq-wb-studio-modes-two .tq-wb-ai-btn,
.tq-wb-studio-modes .tq-wb-ai-btn[data-ai-mode="vocab"],
.tq-wb-studio-modes .tq-wb-ai-btn[data-ai-mode="verbs"]{
  background:linear-gradient(135deg,#6C5CE7 0%,#B91C1C 58%,#7F1D1D 100%)!important;
  color:#fff!important;
  border-color:#6C5CE7!important;
  box-shadow:0 12px 28px rgba(108,92,231,.28)!important;
}
.tq-wb-studio-modes-two .tq-wb-ai-btn:hover,
.tq-wb-studio-modes .tq-wb-ai-btn[data-ai-mode="vocab"]:hover,
.tq-wb-studio-modes .tq-wb-ai-btn[data-ai-mode="verbs"]:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 18px 34px rgba(108,92,231,.34)!important;
}
.tq-wb-studio-modes-two .tq-wb-ai-btn::after,
.tq-wb-studio-modes .tq-wb-ai-btn[data-ai-mode="vocab"]::after,
.tq-wb-studio-modes .tq-wb-ai-btn[data-ai-mode="verbs"]::after{
  content:'4-5 opciones conectadas';
  display:block;
  margin-top:4px;
  font-size:9px;
  font-weight:950;
  letter-spacing:.06em;
  text-transform:uppercase;
  opacity:.86;
}
.tq-wb-studio-note{border-color:rgba(108,92,231,.22)!important;background:#fff7f7!important;color:#7f1d1d!important;}
@media (max-width:520px){.tq-wb-studio-modes-two{grid-template-columns:1fr!important;}}

/* v6.19.7 — Studio CEFR + conversación/texto + resize más útil */
.tq-wb-level-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:-2px 0 6px;font-size:11px;font-weight:950;color:#7f1d1d;}
.tq-wb-level-row>span{text-transform:uppercase;letter-spacing:.06em;color:#991b1b;}
.tq-wb-level-row label{display:inline-flex;align-items:center;gap:4px;border:1px solid rgba(108,92,231,.18);background:#fff;border-radius:999px;padding:5px 8px;cursor:pointer;}
.tq-wb-level-row input{accent-color:#6C5CE7;}
.tq-wb-studio-modes-four{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;}
.tq-wb-studio-modes-four .tq-wb-ai-btn{min-height:42px!important;padding:9px 10px!important;border-radius:12px!important;font-size:12px!important;font-weight:950!important;line-height:1.05!important;background:linear-gradient(135deg,#6C5CE7 0%,#B91C1C 58%,#7F1D1D 100%)!important;color:#fff!important;border-color:#6C5CE7!important;box-shadow:0 9px 18px rgba(108,92,231,.20)!important;}
.tq-wb-studio-modes-four .tq-wb-ai-btn::after{content:'4-5 opciones';display:block;margin-top:3px;font-size:8.5px;font-weight:950;letter-spacing:.06em;text-transform:uppercase;opacity:.84;}
.tq-wb-add-elements-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
.tq-wb-item{container-type:inline-size;}
.tq-wb-item-widget,.tq-wb-widget-vocab,.tq-wb-widget-verbs,.tq-wb-widget-choice,.tq-wb-widget-match,.tq-wb-widget-conversation,.tq-wb-widget-text{min-width:280px!important;max-width:min(900px,96vw)!important;min-height:150px!important;}
.tq-wb-resize-handle{width:24px!important;height:24px!important;right:4px!important;bottom:4px!important;border-radius:9px!important;background-color:rgba(255,255,255,.92)!important;box-shadow:0 4px 12px rgba(15,23,42,.18)!important;z-index:5;}
.tq-vocab-grid,.tq-verb-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
.tq-match-cols{grid-template-columns:repeat(2,minmax(0,1fr));}
.tq-match-token{padding:7px 8px!important;font-size:12px!important;}
.tq-choice-option{font-size:13px;}
.tq-conversation-widget,.tq-text-widget{gap:9px;}
.tq-convo-top{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;font-weight:950;color:#7f1d1d;}
.tq-convo-next{border:0;border-radius:999px;background:var(--text);color:#fff;font-weight:950;padding:6px 10px;cursor:pointer;}
.tq-convo-roles{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.tq-convo-roles span{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:14px;background:#fff;border:1px solid rgba(108,92,231,.16);font-family:var(--font-head);font-size:17px;font-weight:950;color:var(--text);}
.tq-convo-prompt{font-family:var(--font-head);font-size:18px;font-weight:950;color:var(--text);background:#fff;border-radius:15px;padding:10px;border:1px solid rgba(15,23,42,.1);}
.tq-convo-goal{font-size:12px;font-weight:950;background:#fff7ed;border:1px solid rgba(251,146,60,.28);border-radius:13px;padding:8px;color:#7c2d12;}
.tq-convo-support{display:flex;flex-wrap:wrap;gap:6px;}
.tq-convo-support button{border:1px solid rgba(108,92,231,.16);border-radius:999px;background:#fff;color:#7f1d1d;font-size:11px;font-weight:950;padding:6px 8px;cursor:pointer;}
.tq-text-body{font-size:15px;line-height:1.45;font-weight:850;color:var(--text);background:#fff;border:1px solid rgba(15,23,42,.1);border-radius:15px;padding:11px;}
.tq-text-gloss{display:flex;flex-wrap:wrap;gap:6px;}
.tq-text-gloss span{border-radius:999px;background:#fee2e2;color:#7f1d1d;padding:5px 8px;font-size:11px;font-weight:950;}
.tq-text-questions{margin:0;padding-left:22px;background:#fff7f7;border:1px solid rgba(108,92,231,.14);border-radius:14px;padding-top:8px;padding-bottom:8px;font-size:12px;font-weight:900;color:var(--text-2);}
@container (min-width: 560px){.tq-vocab-grid,.tq-verb-grid{grid-template-columns:repeat(3,minmax(0,1fr));}.tq-choice-options{grid-template-columns:repeat(2,minmax(0,1fr));}}
@container (max-width: 360px){.tq-vocab-grid,.tq-verb-grid,.tq-choice-options,.tq-match-cols,.tq-convo-roles{grid-template-columns:1fr!important;}.tq-vocab-card .tq-vocab-emoji{font-size:24px}.tq-vocab-card strong,.tq-verb-card b{font-size:15px}.tq-choice-prompt,.tq-convo-prompt{font-size:15px}.tq-wb-item-body{font-size:12px!important;}}
@media (max-width:520px){.tq-wb-studio-modes-four{grid-template-columns:1fr!important;}.tq-wb-add-elements-grid{grid-template-columns:1fr!important;}}
.tq-wb-studio-modes-four .tq-wb-ai-btn::after,
.tq-wb-studio-modes-four .tq-wb-ai-btn[data-ai-mode="vocab"]::after,
.tq-wb-studio-modes-four .tq-wb-ai-btn[data-ai-mode="verbs"]::after,
.tq-wb-studio-modes-four .tq-wb-ai-btn[data-ai-mode="conversation"]::after,
.tq-wb-studio-modes-four .tq-wb-ai-btn[data-ai-mode="text"]::after{display:none!important;content:''!important;}

/* v6.19.8 — tarjetas estables, Studio blanco y barra superior más limpia */
.tq-wb-item-interactive::before,
.tq-wb-item-interactive:before{display:none!important;content:none!important;}
.tq-wb-resize-handle{display:none!important;pointer-events:none!important;}
.tq-wb-item.is-resizing{outline:0!important;cursor:grab!important;}
.tq-wb-item{max-width:min(360px,72vw)!important;max-height:none!important;overflow:visible!important;resize:none!important;}
.tq-wb-item-widget,
.tq-wb-widget-vocab,
.tq-wb-widget-verbs,
.tq-wb-widget-choice,
.tq-wb-widget-match,
.tq-wb-widget-conversation,
.tq-wb-widget-text{min-width:300px!important;max-width:min(620px,92vw)!important;min-height:0!important;}
.tq-wb-widget-text{max-width:min(680px,94vw)!important;}
.tq-wb-studio-modes-four .tq-wb-ai-btn,
.tq-wb-studio-modes .tq-wb-ai-btn[data-ai-mode="vocab"],
.tq-wb-studio-modes .tq-wb-ai-btn[data-ai-mode="verbs"],
.tq-wb-studio-modes .tq-wb-ai-btn[data-ai-mode="conversation"],
.tq-wb-studio-modes .tq-wb-ai-btn[data-ai-mode="text"]{
  background:#fff!important;
  color:var(--text)!important;
  border:1px solid rgba(108,92,231,.20)!important;
  box-shadow:0 8px 20px rgba(15,23,42,.06)!important;
}
.tq-wb-studio-modes-four .tq-wb-ai-btn:hover,
.tq-wb-studio-modes .tq-wb-ai-btn[data-ai-mode="vocab"]:hover,
.tq-wb-studio-modes .tq-wb-ai-btn[data-ai-mode="verbs"]:hover,
.tq-wb-studio-modes .tq-wb-ai-btn[data-ai-mode="conversation"]:hover,
.tq-wb-studio-modes .tq-wb-ai-btn[data-ai-mode="text"]:hover{
  transform:translateY(-1px)!important;
  border-color:rgba(108,92,231,.45)!important;
  box-shadow:0 12px 26px rgba(108,92,231,.12)!important;
}
.tq-wb-command-settings{flex:0 1 185px!important;}
.tq-wb-command-settings .tq-wb-size{flex:0 0 auto!important;gap:5px!important;}
.tq-wb-command-settings .tq-wb-size input{width:72px!important;min-width:72px!important;}
.tq-wb-command-settings .tq-wb-bg{min-width:104px!important;max-width:128px!important;}
.tq-wb-command-bar{align-items:center!important;}
.tq-wb-command-main{gap:6px!important;}
.tq-wb-command-main .pedro-btn,
.tq-wb-command-main .pedro-btn-secondary{padding:7px 10px!important;min-height:34px!important;}
.tq-wb-add-elements-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
.tq-wb-add-elements-grid .pedro-btn-secondary{background:#fff!important;border-color:rgba(15,23,42,.10)!important;box-shadow:0 6px 14px rgba(15,23,42,.05)!important;}
.tq-convo-roles span{display:none!important;}
.tq-convo-role{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:14px;background:#fff;border:1px solid rgba(108,92,231,.16);font-family:var(--font-head);font-size:17px;font-weight:950;color:var(--text);cursor:pointer;}
.tq-convo-role.is-active{background:#6C5CE7!important;border-color:#6C5CE7!important;color:#fff!important;box-shadow:0 8px 18px rgba(108,92,231,.18)!important;}
.tq-convo-checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;}
.tq-convo-checks button{border:1px solid rgba(15,23,42,.10);border-radius:12px;background:#fff;color:var(--text-2);font-size:10.5px;font-weight:950;padding:7px 6px;cursor:pointer;}
.tq-convo-support button.is-used,
.tq-convo-checks button.is-used{background:#DCFCE7!important;border-color:#22C55E!important;color:#166534!important;text-decoration:line-through;}
.tq-text-body{font-size:14px!important;line-height:1.5!important;}
.tq-text-questions{font-size:12.5px!important;}
@media (max-width:720px){
  .tq-wb-command-settings{flex:1 1 auto!important;}
  .tq-wb-command-main{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
  .tq-convo-checks{grid-template-columns:1fr!important;}
}
.tq-wb-ai-pill{display:none!important;}

/* ══════════════════════ v6.20.0 CLEAN SUPER PIZARRA ══════════════════════ */
#pedro-ai-app.pedro-whiteboard-mode #pedro-whiteboard-panel.active,
#pedro-ai-app.pedro-whiteboard-mode #pedro-whiteboard-panel .pedro-wow-panel-stage,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2-shell{height:100%!important;min-height:0!important;overflow:hidden!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2-shell{display:flex!important;flex-direction:column!important;gap:8px!important;margin-top:0!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2-topbar{flex:0 0 auto!important;display:flex!important;align-items:center!important;gap:7px!important;flex-wrap:nowrap!important;padding:7px 8px!important;border-radius:16px!important;background:rgba(255,255,255,.94)!important;border:1px solid rgba(15,23,42,.10)!important;box-shadow:0 10px 26px rgba(15,23,42,.07)!important;overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch!important;}
.tq-wb-v2-topbar .tq-wb-command-section{display:flex;align-items:center;gap:6px;flex:0 0 auto;}
.tq-wb-v2-topbar .tq-wb-tool{min-width:32px!important;min-height:32px!important;padding:5px 7px!important;border-radius:12px!important;border:1px solid rgba(15,23,42,.12)!important;background:#fff!important;color:var(--text)!important;font-size:13px!important;box-shadow:none!important;}
.tq-wb-v2-topbar .tq-wb-tool.active{background:#6C5CE7!important;color:#fff!important;border-color:#6C5CE7!important;box-shadow:0 8px 18px rgba(108,92,231,.20)!important;}
.tq-wb-v2-topbar .tq-wb-color{width:24px!important;height:24px!important;border:2px solid #fff!important;outline:1px solid rgba(15,23,42,.18)!important;box-shadow:0 2px 8px rgba(15,23,42,.10)!important;}
.tq-wb-v2-topbar .tq-wb-color.active{outline:3px solid rgba(108,92,231,.45)!important;transform:none!important;}
.tq-wb-v2-topbar .tq-wb-size{gap:5px!important;font-size:10px!important;font-weight:950!important;color:var(--text-3)!important;letter-spacing:.04em!important;}
.tq-wb-v2-topbar .tq-wb-size input{width:70px!important;min-width:70px!important;accent-color:#6C5CE7!important;}
.tq-wb-v2-topbar .tq-wb-bg{min-width:100px!important;max-width:118px!important;padding:6px 8px!important;border-radius:11px!important;font-size:11px!important;font-weight:900!important;}
.tq-wb-v2-topbar .pedro-btn,
.tq-wb-v2-topbar .pedro-btn-secondary{min-height:32px!important;padding:5px 8px!important;border-radius:11px!important;font-size:12px!important;font-weight:950!important;white-space:nowrap!important;}
.tq-wb-v2-topbar .tq-wb-save-status{min-width:80px!important;font-size:11px!important;font-weight:900!important;color:#059669!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2-workspace{flex:1 1 auto!important;min-height:0!important;height:auto!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(320px,385px)!important;gap:10px!important;align-items:stretch!important;overflow:hidden!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2-stage{height:100%!important;min-height:0!important;max-height:none!important;position:relative!important;overflow:hidden!important;border-radius:22px!important;background-color:#fff!important;border:1px solid rgba(15,23,42,.10)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 18px 46px rgba(15,23,42,.10)!important;touch-action:none!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2-dock{height:100%!important;min-height:0!important;max-height:100%!important;display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;gap:10px!important;overflow-y:auto!important;overflow-x:hidden!important;align-self:stretch!important;padding:0 8px 120px 0!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior:contain!important;scrollbar-width:thin!important;scrollbar-color:rgba(15,23,42,.24) transparent!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2-dock::after{content:''!important;display:block!important;flex:0 0 130px!important;width:1px!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2.tq-wb-dock-hidden .tq-wb-v2-workspace{grid-template-columns:minmax(0,1fr)!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2.tq-wb-dock-hidden .tq-wb-v2-dock{display:none!important;visibility:hidden!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2.tq-wb-dock-hidden .tq-wb-v2-stage{display:block!important;width:100%!important;height:100%!important;min-height:0!important;}
#tq-whiteboard-canvas{position:absolute!important;inset:0!important;z-index:1!important;width:100%!important;height:100%!important;display:block!important;touch-action:none!important;}
.tq-whiteboard-elements{position:absolute!important;inset:0!important;z-index:3!important;pointer-events:none!important;}
.tq-whiteboard-empty{position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;z-index:2!important;display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;color:rgba(15,23,42,.50);pointer-events:none;}
.tq-whiteboard-empty strong{font-family:var(--font-head);font-size:22px;color:rgba(15,23,42,.58);}
.tq-whiteboard-empty span{font-size:13px;font-weight:800;}
.tq-wb-bg-grid{background-image:linear-gradient(rgba(37,99,235,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.08) 1px,transparent 1px)!important;background-size:34px 34px!important;}
.tq-wb-bg-lines{background-image:repeating-linear-gradient(0deg,transparent 0,transparent 37px,rgba(37,99,235,.16) 38px)!important;}
.tq-wb-bg-blank{background:#fff!important;}
.tq-wb-bg-grammar{background:linear-gradient(90deg,rgba(108,92,231,.08) 0 24%,transparent 24% 100%),repeating-linear-gradient(0deg,transparent 0,transparent 43px,rgba(15,23,42,.08) 44px)!important;}
.tq-wb-bg-spanish{background:linear-gradient(180deg,rgba(198,15,15,.10) 0 18%,rgba(255,196,0,.13) 18% 82%,rgba(198,15,15,.10) 82% 100%)!important;}
.tq-wb-v2 .tq-wb-dock-panel{flex:0 0 auto!important;border:1px solid rgba(15,23,42,.10)!important;border-radius:18px!important;background:rgba(255,255,255,.96)!important;box-shadow:0 12px 28px rgba(15,23,42,.06)!important;overflow:hidden!important;}
.tq-wb-v2 .tq-wb-dock-panel summary{padding:12px 13px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;cursor:pointer!important;}
.tq-wb-v2 .tq-wb-dock-panel summary span{font-size:14px!important;font-weight:950!important;color:var(--text)!important;}
.tq-wb-v2 .tq-wb-dock-panel summary small{font-size:9px!important;font-weight:950!important;text-transform:uppercase!important;letter-spacing:.06em!important;color:var(--text-4)!important;}
.tq-wb-v2 .tq-wb-dock-panel summary:after{content:'+'!important;display:grid!important;place-items:center!important;flex:0 0 22px!important;width:22px!important;height:22px!important;border-radius:999px!important;background:var(--surface-2)!important;color:var(--text-2)!important;font-weight:950!important;}
.tq-wb-v2 .tq-wb-dock-panel[open] summary{border-bottom:1px solid rgba(15,23,42,.07)!important;}
.tq-wb-v2 .tq-wb-dock-panel[open] summary:after{content:'-'!important;background:var(--text)!important;color:#fff!important;}
.tq-wb-v2 .tq-wb-dock-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;padding:12px!important;}
.tq-wb-v2 .tq-wb-dock-grid .pedro-btn-secondary{background:#fff!important;border:1px solid rgba(15,23,42,.10)!important;color:var(--text)!important;border-radius:13px!important;min-height:38px!important;padding:8px 9px!important;font-size:11.5px!important;font-weight:950!important;box-shadow:0 6px 14px rgba(15,23,42,.04)!important;}
.tq-wb-v2 .tq-wb-dock-grid .pedro-btn-secondary:hover{border-color:rgba(108,92,231,.35)!important;background:#FFF7F7!important;}
.tq-wb-v2 .tq-wb-studio{padding:12px!important;border:0!important;border-radius:0!important;background:linear-gradient(180deg,#fff7f7,#fff)!important;box-shadow:none!important;display:grid!important;gap:10px!important;}
.tq-wb-v2 .tq-wb-ai-head strong{font-size:17px!important;font-weight:950!important;color:var(--text)!important;}
.tq-wb-v2 .tq-wb-ai-head span{font-size:11.5px!important;font-weight:800!important;color:var(--text-3)!important;}
.tq-wb-v2 #tq-wb-ai-prompt{min-height:78px!important;max-height:140px!important;width:100%!important;resize:vertical!important;border:1px solid rgba(15,23,42,.12)!important;border-radius:15px!important;padding:11px 12px!important;background:#fff!important;font-size:13px!important;font-weight:750!important;color:var(--text)!important;}
.tq-wb-v2 #tq-wb-ai-prompt:focus{outline:3px solid rgba(108,92,231,.14)!important;border-color:rgba(108,92,231,.44)!important;}
.tq-wb-v2 .tq-wb-level-row{display:flex!important;align-items:center!important;gap:6px!important;flex-wrap:wrap!important;margin:0!important;font-size:10.5px!important;font-weight:950!important;color:#7F1D1D!important;}
.tq-wb-v2 .tq-wb-level-row>span{text-transform:uppercase!important;letter-spacing:.06em!important;}
.tq-wb-v2 .tq-wb-level-row label{display:inline-flex!important;align-items:center!important;gap:4px!important;border:1px solid rgba(108,92,231,.18)!important;background:#fff!important;border-radius:999px!important;padding:5px 7px!important;cursor:pointer!important;}
.tq-wb-v2 .tq-wb-level-row input{accent-color:#6C5CE7!important;}
.tq-wb-v2 .tq-wb-studio-modes-four{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;}
.tq-wb-v2 .tq-wb-studio-modes-four .tq-wb-ai-btn{background:#fff!important;color:var(--text)!important;border:1px solid rgba(108,92,231,.20)!important;border-radius:14px!important;min-height:42px!important;padding:8px 9px!important;font-size:12px!important;font-weight:950!important;line-height:1.05!important;box-shadow:0 8px 18px rgba(15,23,42,.05)!important;}
.tq-wb-v2 .tq-wb-studio-modes-four .tq-wb-ai-btn:hover{transform:translateY(-1px)!important;border-color:rgba(108,92,231,.45)!important;background:#fffafa!important;box-shadow:0 12px 26px rgba(108,92,231,.10)!important;}
.tq-wb-v2 .tq-wb-studio-modes-four .tq-wb-ai-btn::after{display:none!important;content:''!important;}
.tq-wb-v2 .tq-wb-studio-note{font-size:11px!important;font-weight:850!important;line-height:1.35!important;color:#7F1D1D!important;background:#FFF7F7!important;border:1px solid rgba(108,92,231,.16)!important;border-radius:13px!important;padding:9px 10px!important;}
.tq-wb-v2 .tq-wb-ai-result{margin-top:0!important;padding-top:10px!important;border-top:1px dashed rgba(15,23,42,.13)!important;max-height:none!important;overflow:visible!important;}
.tq-wb-v2 .tq-wb-ai-loading{padding:12px!important;border-radius:14px!important;background:#fff!important;border:1px solid rgba(15,23,42,.10)!important;font-size:12px!important;font-weight:900!important;color:#7F1D1D!important;}
.tq-wb-v2 .tq-wb-ai-output-head{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:8px!important;margin-bottom:8px!important;}
.tq-wb-v2 .tq-wb-ai-output-head b{font-size:15px!important;font-weight:950!important;color:var(--text)!important;}
.tq-wb-v2 .tq-wb-ai-output-head span{font-size:11px!important;font-weight:800!important;color:var(--text-3)!important;}
.tq-wb-v2 .tq-wb-ai-add-all,
.tq-wb-v2 .tq-wb-ai-add-one{border:0!important;border-radius:999px!important;background:#6C5CE7!important;color:#fff!important;padding:7px 10px!important;font-size:10.5px!important;font-weight:950!important;cursor:pointer!important;box-shadow:0 8px 18px rgba(108,92,231,.20)!important;}
.tq-wb-v2 .tq-wb-ai-insight{display:grid!important;gap:3px!important;margin:8px 0!important;padding:10px!important;border-radius:14px!important;background:linear-gradient(135deg,var(--text),#7F1D1D)!important;color:#fff!important;}
.tq-wb-v2 .tq-wb-ai-insight b{font-size:12px!important;font-weight:950!important;color:#fff!important;}
.tq-wb-v2 .tq-wb-ai-insight span{font-size:11px!important;font-weight:850!important;color:rgba(255,255,255,.86)!important;line-height:1.35!important;}
.tq-wb-v2 .tq-wb-ai-warnings{display:grid!important;gap:5px!important;margin:7px 0!important;}
.tq-wb-v2 .tq-wb-ai-warnings span{display:block!important;padding:7px 8px!important;border-radius:11px!important;background:#FFF7ED!important;border:1px solid #FED7AA!important;color:#9A3412!important;font-size:11px!important;font-weight:850!important;line-height:1.3!important;}
.tq-wb-v2 .tq-wb-flow{display:grid!important;gap:6px!important;margin:8px 0!important;}
.tq-wb-v2 .tq-wb-flow span{display:flex!important;gap:6px!important;align-items:flex-start!important;padding:7px 8px!important;border-radius:11px!important;background:#fff!important;border:1px solid rgba(15,23,42,.08)!important;font-size:11px!important;font-weight:800!important;color:var(--text-2)!important;}
.tq-wb-v2 .tq-wb-flow b{display:grid!important;place-items:center!important;min-width:18px!important;height:18px!important;border-radius:999px!important;background:#6C5CE7!important;color:#fff!important;font-size:10px!important;}
.tq-wb-v2 .tq-wb-ai-cards{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;}
.tq-wb-v2 .tq-wb-ai-card{display:flex!important;flex-direction:column!important;gap:7px!important;min-height:0!important;padding:11px!important;border-radius:15px!important;background:#fff!important;border:1px solid rgba(15,23,42,.10)!important;box-shadow:0 8px 18px rgba(15,23,42,.05)!important;}
.tq-wb-v2 .tq-wb-ai-card small{width:max-content!important;padding:4px 7px!important;border-radius:999px!important;font-size:9px!important;font-weight:950!important;text-transform:uppercase!important;letter-spacing:.06em!important;background:#EDEBFE!important;color:#5546D6!important;}
.tq-wb-v2 .tq-wb-ai-card strong{font-size:14px!important;font-weight:950!important;color:var(--text)!important;}
.tq-wb-v2 .tq-wb-ai-card p{margin:0!important;font-size:11.5px!important;line-height:1.38!important;font-weight:800!important;color:var(--text-3)!important;}
.tq-wb-v2 .tq-wb-ai-card-green{border-color:rgba(16,185,129,.30)!important;background:#F0FDF4!important;}
.tq-wb-v2 .tq-wb-ai-card-blue{border-color:rgba(59,130,246,.30)!important;background:#EFF6FF!important;}
.tq-wb-v2 .tq-wb-ai-card-red{border-color:rgba(108,92,231,.26)!important;background:#FFF1F2!important;}
.tq-wb-v2 .tq-wb-ai-tip{margin-top:8px!important;padding:9px 10px!important;border-radius:13px!important;background:#fff!important;border:1px solid rgba(15,23,42,.08)!important;font-size:11.5px!important;font-weight:850!important;color:var(--text-2)!important;}
.tq-wb-v2-item,
.tq-wb-v2 .tq-wb-item{position:absolute!important;box-sizing:border-box!important;min-width:0!important;max-width:min(620px,94vw)!important;max-height:none!important;overflow:visible!important;resize:none!important;padding:0!important;border-radius:18px!important;border:2px solid #F59E0B!important;background:#fff!important;box-shadow:0 16px 34px rgba(15,23,42,.14)!important;color:var(--text)!important;pointer-events:auto!important;user-select:none!important;touch-action:none!important;cursor:default!important;}
.tq-wb-v2 .tq-wb-item-interactive:before,
.tq-wb-v2 .tq-wb-item-interactive::before,
.tq-wb-v2 .tq-wb-resize-handle{display:none!important;content:none!important;pointer-events:none!important;}
.tq-wb-v2 .tq-wb-item-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;padding:9px 11px 6px!important;border-bottom:1px solid rgba(15,23,42,.08)!important;cursor:grab!important;}
.tq-wb-v2 .tq-wb-item-head:active{cursor:grabbing!important;}
.tq-wb-v2 .tq-wb-item-title{display:block!important;flex:1!important;font-family:var(--font-head)!important;font-size:15px!important;line-height:1.15!important;font-weight:950!important;color:var(--text)!important;outline:none!important;}
.tq-wb-v2 .tq-wb-item-body{display:block!important;padding:10px 11px 12px!important;white-space:normal!important;line-height:1.35!important;font-size:13px!important;font-weight:800!important;color:var(--text-2)!important;outline:none!important;overflow:visible!important;min-height:42px!important;}
.tq-wb-v2 .tq-wb-item-body[contenteditable="true"]{white-space:pre-wrap!important;cursor:text!important;}
.tq-wb-v2 .tq-wb-item-body[contenteditable="true"].is-tq-editable-empty::before{content:attr(data-placeholder);color:var(--text-4);font-weight:700;font-style:italic;pointer-events:none;display:block;}
.tq-wb-v2 .tq-wb-item-body[contenteditable="true"]:focus,
.tq-wb-v2 .tq-wb-item-title[contenteditable="true"]:focus{background:rgba(255,255,255,.86)!important;border-radius:10px!important;box-shadow:inset 0 0 0 2px rgba(108,92,231,.28)!important;}
.tq-wb-v2 .tq-wb-item-close{position:static!important;display:grid!important;place-items:center!important;width:24px!important;height:24px!important;min-width:24px!important;border:0!important;border-radius:999px!important;background:rgba(15,23,42,.06)!important;color:var(--text-3)!important;font-weight:950!important;font-size:15px!important;line-height:1!important;cursor:pointer!important;transition:background .15s ease,color .15s ease,transform .12s ease!important;}
.tq-wb-v2 .tq-wb-item-close:hover{background:#6C5CE7!important;color:#fff!important;}
.tq-wb-v2 .tq-wb-item-close.is-confirming{background:#6C5CE7!important;color:#fff!important;animation:tqCloseConfirmPulse 1.1s ease-in-out infinite!important;width:auto!important;min-width:60px!important;padding:0 10px!important;font-size:12px!important;}
.tq-wb-v2 .tq-wb-item-close.is-confirming::after{content:" Borrar"!important;margin-left:2px!important;font-weight:900!important;letter-spacing:.02em!important;}
@keyframes tqCloseConfirmPulse{0%,100%{box-shadow:0 0 0 0 rgba(108,92,231,.4)}50%{box-shadow:0 0 0 6px rgba(108,92,231,0)}}
.tq-wb-v2 .tq-wb-item-stamp{width:82px!important;text-align:center!important;}
.tq-wb-v2 .tq-wb-item-stamp .tq-wb-item-title{font-size:38px!important;text-align:center!important;}
.tq-wb-v2 .tq-wb-item-stamp .tq-wb-item-body{display:none!important;}
.tq-wb-v2 .tq-wb-item-widget{min-width:300px!important;max-width:min(620px,94vw)!important;}
.tq-wb-v2 .tq-wb-widget-short_text{max-width:min(680px,96vw)!important;}
.tq-wb-v2 .tq-ai-widget-body{padding:8px 10px 11px!important;}
.tq-wb-v2 .tq-ai-widget{display:grid!important;gap:8px!important;}
.tq-wb-v2 .tq-widget-help,
.tq-wb-v2 .tq-match-help{font-size:10.5px!important;font-weight:900!important;color:var(--text-3)!important;text-transform:none!important;}
.tq-wb-v2 .tq-vocab-grid,
.tq-wb-v2 .tq-verb-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;}
.tq-wb-v2 .tq-vocab-card,
.tq-wb-v2 .tq-verb-card{min-height:92px!important;border:1px solid rgba(15,23,42,.10)!important;border-radius:15px!important;background:#fff!important;color:var(--text)!important;padding:9px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:5px!important;text-align:center!important;cursor:pointer!important;box-shadow:0 6px 14px rgba(15,23,42,.05)!important;transition:transform .12s ease,background .12s ease,border-color .12s ease!important;}
.tq-wb-v2 .tq-vocab-card:hover,
.tq-wb-v2 .tq-verb-card:hover{transform:translateY(-1px)!important;border-color:rgba(108,92,231,.32)!important;}
.tq-wb-v2 .tq-vocab-emoji{font-size:27px!important;line-height:1!important;}
.tq-wb-v2 .tq-vocab-card strong,
.tq-wb-v2 .tq-verb-card b{font-size:15px!important;font-weight:950!important;color:var(--text)!important;line-height:1.1!important;}
.tq-wb-v2 .tq-vocab-card small{font-size:11px!important;font-weight:900!important;color:#059669!important;opacity:.12!important;transition:opacity .12s ease!important;}
.tq-wb-v2 .tq-vocab-card em{display:none!important;font-style:normal!important;font-size:10.5px!important;font-weight:800!important;color:var(--text-3)!important;}
.tq-wb-v2 .tq-vocab-card.is-open{background:#ECFDF5!important;border-color:#10B981!important;}
.tq-wb-v2 .tq-vocab-card.is-open small{opacity:1!important;}
.tq-wb-v2 .tq-vocab-card.is-open em{display:block!important;}
.tq-wb-v2 .tq-verb-card{position:relative!important;min-height:118px!important;perspective:700px!important;overflow:hidden!important;}
.tq-wb-v2 .tq-verb-front,
.tq-wb-v2 .tq-verb-back{display:flex!important;position:absolute!important;inset:8px!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:5px!important;transition:transform .22s ease,opacity .22s ease!important;backface-visibility:hidden!important;}
.tq-wb-v2 .tq-verb-back{transform:rotateY(180deg)!important;opacity:0!important;}
.tq-wb-v2 .tq-verb-card.is-flipped{background:#EFF6FF!important;border-color:#3B82F6!important;}
.tq-wb-v2 .tq-verb-card.is-flipped .tq-verb-front{transform:rotateY(180deg)!important;opacity:0!important;}
.tq-wb-v2 .tq-verb-card.is-flipped .tq-verb-back{transform:rotateY(0)!important;opacity:1!important;}
.tq-wb-v2 .tq-verb-card small,
.tq-wb-v2 .tq-verb-card em,
.tq-wb-v2 .tq-verb-card i{font-size:10.5px!important;font-style:normal!important;font-weight:850!important;color:var(--text-3)!important;}
.tq-wb-v2 .tq-verb-forms{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:4px!important;}
.tq-wb-v2 .tq-verb-form-chip{display:inline-flex!important;border-radius:999px!important;background:#DBEAFE!important;color:#1D4ED8!important;padding:3px 6px!important;font-size:10px!important;font-weight:950!important;}
.tq-wb-v2 .tq-choice-live{display:grid!important;gap:8px!important;}
.tq-wb-v2 .tq-choice-top{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;font-size:12px!important;font-weight:950!important;color:#065F46!important;}
.tq-wb-v2 .tq-choice-prompt{padding:10px!important;border-radius:14px!important;background:#fff!important;border:1px solid rgba(15,23,42,.10)!important;font-size:15px!important;font-weight:950!important;color:var(--text)!important;}
.tq-wb-v2 .tq-choice-options{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;}
.tq-wb-v2 .tq-choice-option{border:1px solid rgba(15,23,42,.10)!important;border-radius:13px!important;background:#fff!important;color:var(--text)!important;padding:9px 8px!important;font-size:13px!important;font-weight:950!important;cursor:pointer!important;}
.tq-wb-v2 .tq-choice-option.is-correct{background:#DCFCE7!important;border-color:#22C55E!important;color:#166534!important;}
.tq-wb-v2 .tq-choice-option.is-wrong{background:#FEE2E2!important;border-color:#EF4444!important;color:#991B1B!important;}
.tq-wb-v2 .tq-choice-actions{display:grid!important;grid-template-columns:1fr 1fr auto!important;gap:6px!important;}
.tq-wb-v2 .tq-choice-actions button{border:0!important;border-radius:12px!important;background:var(--text)!important;color:#fff!important;font-size:11px!important;font-weight:950!important;padding:7px 8px!important;cursor:pointer!important;}
.tq-wb-v2 .tq-choice-feedback{padding:8px 9px!important;border-radius:12px!important;background:var(--bg)!important;border:1px solid rgba(15,23,42,.08)!important;font-size:12px!important;font-weight:900!important;color:var(--text-2)!important;}
.tq-wb-v2 .tq-match-live{display:grid!important;gap:8px!important;}
.tq-wb-v2 .tq-match-score{font-size:12px!important;font-weight:950!important;color:#065F46!important;}
.tq-wb-v2 .tq-match-cols{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;}
.tq-wb-v2 .tq-match-cols>div{display:grid!important;gap:6px!important;}
.tq-wb-v2 .tq-match-token{border:1px solid rgba(15,23,42,.10)!important;border-radius:12px!important;background:#fff!important;color:var(--text)!important;padding:8px!important;font-size:12px!important;font-weight:950!important;cursor:pointer!important;}
.tq-wb-v2 .tq-match-token.is-selected{background:#FEF3C7!important;border-color:#F59E0B!important;}
.tq-wb-v2 .tq-match-token.is-matched{background:#DCFCE7!important;border-color:#22C55E!important;color:#166534!important;}
.tq-wb-v2 .tq-match-token.is-wrong{background:#FEE2E2!important;border-color:#EF4444!important;}
.tq-wb-v2 .tq-convo-live{display:grid!important;gap:8px!important;}
.tq-wb-v2 .tq-convo-top{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;font-size:12px!important;font-weight:950!important;color:#7F1D1D!important;}
.tq-wb-v2 .tq-convo-next{border:0!important;border-radius:999px!important;background:var(--text)!important;color:#fff!important;font-size:11px!important;font-weight:950!important;padding:6px 9px!important;cursor:pointer!important;}
.tq-wb-v2 .tq-convo-roles{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important;}
.tq-wb-v2 .tq-convo-role{display:flex!important;align-items:center!important;justify-content:center!important;min-height:42px!important;border-radius:13px!important;background:#fff!important;border:1px solid rgba(108,92,231,.16)!important;font-size:14px!important;font-weight:950!important;color:var(--text)!important;cursor:pointer!important;text-align:center!important;}
.tq-wb-v2 .tq-convo-role.is-active{background:#6C5CE7!important;border-color:#6C5CE7!important;color:#fff!important;}
.tq-wb-v2 .tq-convo-prompt{padding:10px!important;border-radius:14px!important;background:#fff!important;border:1px solid rgba(15,23,42,.10)!important;font-size:15px!important;font-weight:950!important;line-height:1.3!important;color:var(--text)!important;}
.tq-wb-v2 .tq-convo-goal{padding:8px 9px!important;border-radius:13px!important;background:#FFF7ED!important;border:1px solid rgba(251,146,60,.28)!important;font-size:12px!important;font-weight:900!important;color:#7C2D12!important;}
.tq-wb-v2 .tq-convo-support{display:flex!important;flex-wrap:wrap!important;gap:6px!important;}
.tq-wb-v2 .tq-convo-support button,
.tq-wb-v2 .tq-convo-checks button{border:1px solid rgba(108,92,231,.16)!important;border-radius:999px!important;background:#fff!important;color:#7F1D1D!important;font-size:10.5px!important;font-weight:950!important;padding:6px 8px!important;cursor:pointer!important;}
.tq-wb-v2 .tq-convo-checks{display:flex!important;flex-wrap:wrap!important;gap:6px!important;}
.tq-wb-v2 .tq-convo-support button.is-used,
.tq-wb-v2 .tq-convo-checks button.is-used{background:#DCFCE7!important;border-color:#22C55E!important;color:#166534!important;text-decoration:line-through!important;}
.tq-wb-v2 .tq-text-widget{display:grid!important;gap:8px!important;}
.tq-wb-v2 .tq-text-body{padding:12px!important;border-radius:15px!important;background:#fff!important;border:1px solid rgba(15,23,42,.10)!important;font-size:14px!important;line-height:1.52!important;font-weight:850!important;color:var(--text)!important;}
.tq-wb-v2 .tq-text-gloss{display:flex!important;flex-wrap:wrap!important;gap:6px!important;}
.tq-wb-v2 .tq-text-gloss span{border-radius:999px!important;background:#EDEBFE!important;color:#5546D6!important;padding:5px 8px!important;font-size:10.5px!important;font-weight:950!important;}
.tq-wb-v2 .tq-text-questions{margin:0!important;padding:8px 8px 8px 24px!important;border-radius:14px!important;background:#FFF7F7!important;border:1px solid rgba(108,92,231,.14)!important;font-size:12px!important;font-weight:900!important;color:var(--text-2)!important;}
.tq-wb-v2 .tq-wb-timer-card{position:absolute!important;right:18px!important;bottom:18px!important;z-index:4!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:2px!important;min-width:128px!important;padding:12px 14px!important;border-radius:18px!important;background:var(--text)!important;color:#fff!important;box-shadow:0 18px 40px rgba(15,23,42,.22)!important;}
.tq-wb-v2 .tq-wb-timer-card[hidden]{display:none!important;}
.tq-wb-v2 .tq-wb-timer-card strong{font-family:var(--font-head)!important;font-size:32px!important;line-height:1!important;color:#6C5CE7!important;text-shadow:0 0 12px rgba(108,92,231,.4)!important;font-variant-numeric:tabular-nums!important;}
.tq-wb-v2 .tq-wb-timer-card span{font-size:10px!important;font-weight:950!important;text-transform:uppercase!important;letter-spacing:.06em!important;color:rgba(255,255,255,.72)!important;}
.tq-wb-v2 .tq-wb-timer-card.done{background:#6C5CE7!important;animation:tqWbPulse .8s ease-in-out infinite alternate!important;}
@keyframes tqWbPulse{from{transform:scale(1)}to{transform:scale(1.04)}}
.tq-wb-v2 .tq-whiteboard-library{position:absolute!important;right:22px!important;top:72px!important;z-index:20!important;width:min(420px,90vw)!important;max-height:min(620px,80vh)!important;display:flex!important;flex-direction:column!important;border-radius:20px!important;background:#fff!important;border:1px solid rgba(15,23,42,.12)!important;box-shadow:0 24px 70px rgba(15,23,42,.22)!important;overflow:hidden!important;}
.tq-wb-v2 .tq-whiteboard-library[hidden]{display:none!important;}
.tq-wb-v2 .tq-wb-lib-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;padding:12px 14px!important;border-bottom:1px solid rgba(15,23,42,.08)!important;}
.tq-wb-v2 .tq-wb-lib-head strong{font-size:15px!important;font-weight:950!important;color:var(--text)!important;}
.tq-wb-v2 #tq-wb-library-close{border:0!important;border-radius:999px!important;background:var(--surface-2)!important;color:var(--text)!important;width:28px!important;height:28px!important;font-weight:950!important;cursor:pointer!important;}
.tq-wb-v2 .tq-wb-library-list{overflow:auto!important;padding:10px!important;display:grid!important;gap:8px!important;}
.tq-wb-v2 .tq-wb-lib-item{display:grid!important;gap:4px!important;text-align:left!important;border:1px solid rgba(15,23,42,.10)!important;background:#fff!important;border-radius:14px!important;padding:10px!important;cursor:pointer!important;}
.tq-wb-v2 .tq-wb-lib-item strong{font-size:13px!important;color:var(--text)!important;}
.tq-wb-v2 .tq-wb-lib-item span{font-size:11px!important;color:var(--text-3)!important;font-weight:850!important;}
@media (max-width:1120px){#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2-workspace{grid-template-columns:minmax(0,1fr) minmax(286px,335px)!important;}.tq-wb-v2 .tq-vocab-grid,.tq-wb-v2 .tq-verb-grid{grid-template-columns:1fr!important;}}
@media (max-width:820px){
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2-workspace{display:flex!important;flex-direction:column!important;overflow:hidden!important;}
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2-stage{flex:1 1 auto!important;min-height:0!important;}
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2-dock{flex:0 0 42vh!important;height:42vh!important;max-height:42vh!important;padding-bottom:150px!important;}
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2.tq-wb-dock-hidden .tq-wb-v2-stage{flex:1 1 auto!important;}
  .tq-wb-v2-topbar .tq-wb-size span{display:none!important;}
  .tq-wb-v2 .tq-wb-studio-modes-four{grid-template-columns:1fr!important;}
  .tq-wb-v2 .tq-wb-dock-grid{grid-template-columns:1fr!important;}
}
@media (max-width:520px){.tq-wb-v2 .tq-choice-options,.tq-wb-v2 .tq-match-cols,.tq-wb-v2 .tq-convo-roles{grid-template-columns:1fr!important;}.tq-wb-v2 .tq-wb-item{max-width:calc(100vw - 30px)!important;}.tq-wb-v2 .tq-wb-command-section.tq-wb-v2-actions{gap:4px!important;}}

/* ══════════════════════ v6.20.1 — fullscreen-safe dialogs + smart card sizing ══════════════════════ */
.tq-wb-v2 .tq-wb-dialog{position:absolute!important;inset:0!important;z-index:9999!important;display:grid!important;place-items:center!important;background:rgba(15,23,42,.32)!important;backdrop-filter:blur(5px)!important;pointer-events:auto!important;touch-action:auto!important;}
.tq-wb-v2 .tq-wb-dialog-card{width:min(380px,calc(100vw - 34px))!important;display:grid!important;gap:10px!important;padding:16px!important;border-radius:22px!important;background:#fff!important;border:1px solid rgba(15,23,42,.12)!important;box-shadow:0 28px 90px rgba(15,23,42,.32)!important;color:var(--text)!important;}
.tq-wb-v2 .tq-wb-dialog-card strong{font-family:var(--font-head)!important;font-size:18px!important;font-weight:950!important;color:var(--text)!important;}
.tq-wb-v2 .tq-wb-dialog-card p{margin:0!important;font-size:12.5px!important;font-weight:850!important;line-height:1.38!important;color:var(--text-3)!important;}
.tq-wb-v2 .tq-wb-dialog-input{width:100%!important;border:1px solid rgba(15,23,42,.14)!important;border-radius:14px!important;background:var(--bg)!important;color:var(--text)!important;font-size:22px!important;font-weight:950!important;padding:10px 12px!important;outline:none!important;}
.tq-wb-v2 .tq-wb-dialog-input:focus{border-color:#6C5CE7!important;box-shadow:0 0 0 4px rgba(108,92,231,.12)!important;background:#fff!important;}
.tq-wb-v2 .tq-wb-dialog-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;margin-top:2px!important;}
.tq-wb-v2 .tq-wb-dialog-actions button{border:0!important;border-radius:13px!important;padding:10px 12px!important;font-size:12px!important;font-weight:950!important;cursor:pointer!important;}
.tq-wb-v2 .tq-wb-dialog-cancel{background:var(--surface-2)!important;color:var(--text-2)!important;}
.tq-wb-v2 .tq-wb-dialog-ok{background:#6C5CE7!important;color:#fff!important;box-shadow:0 10px 22px rgba(108,92,231,.23)!important;}

.tq-wb-v2 .tq-wb-item{max-width:min(760px,94vw)!important;}
.tq-wb-v2 .tq-wb-size-s{width:224px!important;}
.tq-wb-v2 .tq-wb-size-m{width:310px!important;}
.tq-wb-v2 .tq-wb-size-l{width:440px!important;}
.tq-wb-v2 .tq-wb-size-xl{width:580px!important;}
.tq-wb-v2 .tq-wb-item-head{align-items:flex-start!important;gap:7px!important;}
.tq-wb-v2 .tq-wb-item-title{min-width:0!important;word-break:break-word!important;padding-top:2px!important;}
.tq-wb-v2 .tq-wb-item-tools{display:flex!important;align-items:center!important;gap:3px!important;flex:0 0 auto!important;background:var(--bg)!important;border:1px solid rgba(15,23,42,.08)!important;border-radius:999px!important;padding:2px!important;}
.tq-wb-v2 .tq-wb-size-btn{border:0!important;border-radius:999px!important;background:transparent!important;color:var(--text-3)!important;min-width:22px!important;height:22px!important;padding:0 5px!important;font-size:9px!important;font-weight:950!important;line-height:1!important;cursor:pointer!important;}
.tq-wb-v2 .tq-wb-size-btn.active{background:var(--text)!important;color:#fff!important;box-shadow:0 4px 10px rgba(15,23,42,.18)!important;}
.tq-wb-v2 .tq-wb-size-s .tq-wb-item-head{flex-wrap:wrap!important;}
.tq-wb-v2 .tq-wb-size-s .tq-wb-item-tools{order:3!important;width:100%!important;justify-content:space-between!important;}
.tq-wb-v2 .tq-wb-size-s .tq-wb-size-btn{flex:1 1 0!important;}
.tq-wb-v2 .tq-wb-size-xl .tq-vocab-grid,
.tq-wb-v2 .tq-wb-size-xl .tq-verb-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
.tq-wb-v2 .tq-wb-size-l .tq-vocab-grid,
.tq-wb-v2 .tq-wb-size-l .tq-verb-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
.tq-wb-v2 .tq-wb-size-s .tq-vocab-grid,
.tq-wb-v2 .tq-wb-size-s .tq-verb-grid,
.tq-wb-v2 .tq-wb-size-s .tq-choice-options,
.tq-wb-v2 .tq-wb-size-s .tq-match-cols,
.tq-wb-v2 .tq-wb-size-s .tq-convo-roles{grid-template-columns:1fr!important;}
.tq-wb-v2 .tq-wb-size-xl .tq-text-body{font-size:15.5px!important;line-height:1.58!important;}

.tq-wb-v2 .tq-wb-add-elements-grid .pedro-btn-secondary{position:relative!important;overflow:hidden!important;justify-content:flex-start!important;text-align:left!important;min-height:46px!important;border-radius:15px!important;padding:9px 10px 9px 12px!important;border-left-width:5px!important;transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease!important;}
.tq-wb-v2 .tq-wb-add-elements-grid .pedro-btn-secondary:hover{transform:translateY(-1px)!important;box-shadow:0 12px 24px rgba(15,23,42,.10)!important;}
.tq-wb-v2 .tq-add-note{border-left-color:#F59E0B!important;background:linear-gradient(135deg,#FFFBEB,#fff)!important;}
.tq-wb-v2 .tq-add-card{border-left-color:#3B82F6!important;background:linear-gradient(135deg,#EFF6FF,#fff)!important;}
.tq-wb-v2 .tq-add-text{border-left-color:#6C5CE7!important;background:linear-gradient(135deg,#FFF7F7,#fff)!important;}
.tq-wb-v2 .tq-add-timer{border-left-color:var(--text)!important;background:linear-gradient(135deg,var(--bg),#fff)!important;}
.tq-wb-v2 .tq-add-title{border-left-color:#6C5CE7!important;background:linear-gradient(135deg,#EDEBFE,#fff)!important;}
.tq-wb-v2 .tq-add-question{border-left-color:#6366F1!important;background:linear-gradient(135deg,#EEF2FF,#fff)!important;}
.tq-wb-v2 .tq-add-instruction{border-left-color:#F97316!important;background:linear-gradient(135deg,#FFF7ED,#fff)!important;}
.tq-wb-v2 .tq-add-twocol{border-left-color:#8B5CF6!important;background:linear-gradient(135deg,#F5F3FF,#fff)!important;}
.tq-wb-v2 .tq-add-vocab{border-left-color:#10B981!important;background:linear-gradient(135deg,#ECFDF5,#fff)!important;}
.tq-wb-v2 .tq-add-verbs{border-left-color:#2563EB!important;background:linear-gradient(135deg,#DBEAFE,#fff)!important;}
.tq-wb-v2 .tq-add-gap{border-left-color:#EAB308!important;background:linear-gradient(135deg,#FEFCE8,#fff)!important;}
.tq-wb-v2 .tq-add-vf{border-left-color:#22C55E!important;background:linear-gradient(135deg,#DCFCE7,#fff)!important;}
.tq-wb-v2 .tq-add-dialogue{border-left-color:#EC4899!important;background:linear-gradient(135deg,#FCE7F3,#fff)!important;}
.tq-wb-v2 .tq-add-spinner{border-left-color:#7C3AED!important;background:linear-gradient(135deg,#F3E8FF,#fff)!important;}
.tq-wb-v2 .tq-add-traffic{border-left-color:#16A34A!important;background:linear-gradient(135deg,#ECFDF5,#fff)!important;}
.tq-wb-v2 .tq-add-library{border-left-color:var(--text-3)!important;background:linear-gradient(135deg,var(--bg),#fff)!important;}

.tq-wb-v2 .tq-card-title{border-color:#6C5CE7!important;}
.tq-wb-v2 .tq-card-question{border-color:#6366F1!important;}
.tq-wb-v2 .tq-card-instruction{border-color:#F97316!important;}
.tq-wb-v2 .tq-card-twocol{border-color:#8B5CF6!important;}
.tq-wb-v2 .tq-card-vocab{border-color:#10B981!important;}
.tq-wb-v2 .tq-card-verbs{border-color:#2563EB!important;}
.tq-wb-v2 .tq-card-gaps{border-color:#EAB308!important;}
.tq-wb-v2 .tq-card-vf{border-color:#22C55E!important;}
.tq-wb-v2 .tq-card-dialogue{border-color:#EC4899!important;}
.tq-wb-v2 .tq-card-spinner{border-color:#7C3AED!important;}
.tq-wb-v2 .tq-card-traffic{border-color:#16A34A!important;}
.tq-wb-v2 .tq-card-sort{border-color:#8B5CF6!important;}
.tq-wb-v2 .tq-card-exit{border-color:#F97316!important;}
.tq-wb-v2 .tq-card-pairs{border-color:#10B981!important;}

.tq-wb-v2 .tq-special-two{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;}
.tq-wb-v2 .tq-special-two>div{display:grid!important;gap:6px!important;padding:8px!important;border-radius:14px!important;background:#fff!important;border:1px solid rgba(15,23,42,.08)!important;}
.tq-wb-v2 .tq-special-two b{font-size:10px!important;font-weight:950!important;color:var(--text-3)!important;letter-spacing:.06em!important;}
.tq-wb-v2 .tq-special-two button,
.tq-wb-v2 .tq-special-vocab button,
.tq-wb-v2 .tq-special-verbs button,
.tq-wb-v2 .tq-special-gaps button,
.tq-wb-v2 .tq-special-vf button{border:1px solid rgba(15,23,42,.10)!important;border-radius:12px!important;background:#fff!important;color:var(--text)!important;padding:8px!important;font-size:12px!important;font-weight:950!important;cursor:pointer!important;text-align:left!important;}
.tq-wb-v2 .tq-special-vocab{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;}
.tq-wb-v2 .tq-special-verbs{display:grid!important;gap:7px!important;}
.tq-wb-v2 .tq-special-verbs button{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;background:#EFF6FF!important;border-color:#BFDBFE!important;}
.tq-wb-v2 .tq-special-verbs b{font-size:13px!important;color:#1D4ED8!important;}
.tq-wb-v2 .tq-special-verbs span{font-size:11px!important;color:#1E3A8A!important;}
.tq-wb-v2 .tq-special-gaps,.tq-wb-v2 .tq-special-vf{display:grid!important;gap:7px!important;}
.tq-wb-v2 .tq-special-vf span{display:inline-grid!important;place-items:center!important;width:20px!important;height:20px!important;margin-right:6px!important;border-radius:999px!important;background:var(--text)!important;color:#fff!important;font-size:10px!important;}
.tq-wb-v2 .tq-special-vocab button.is-used,
.tq-wb-v2 .tq-special-verbs button.is-used,
.tq-wb-v2 .tq-special-gaps button.is-used,
.tq-wb-v2 .tq-special-vf button.is-used{background:#DCFCE7!important;border-color:#22C55E!important;color:#166534!important;text-decoration:line-through!important;}
.tq-wb-v2 .tq-special-hint{margin-top:7px!important;border-radius:12px!important;background:#ECFDF5!important;color:#047857!important;padding:7px 8px!important;font-size:11px!important;font-weight:900!important;}
.tq-wb-v2 .tq-special-dialogue{display:grid!important;gap:7px!important;}
.tq-wb-v2 .tq-special-dialogue p{margin:0!important;padding:8px 9px!important;border-radius:13px!important;background:#fff!important;border:1px solid rgba(108,92,231,.12)!important;font-size:13px!important;font-weight:900!important;color:var(--text-2)!important;}
.tq-wb-v2 .tq-special-dialogue b{display:inline-grid!important;place-items:center!important;width:22px!important;height:22px!important;margin-right:6px!important;border-radius:999px!important;background:#6C5CE7!important;color:#fff!important;}
.tq-wb-v2 .tq-special-spinner{display:grid!important;gap:8px!important;text-align:center!important;}
.tq-wb-v2 .tq-spinner-result{min-height:58px!important;display:grid!important;place-items:center!important;padding:10px!important;border-radius:16px!important;background:linear-gradient(135deg,#F3E8FF,#fff)!important;border:1px solid #DDD6FE!important;font-family:var(--font-head)!important;font-size:16px!important;font-weight:950!important;color:#4C1D95!important;}
.tq-wb-v2 .tq-spinner-btn{border:0!important;border-radius:999px!important;background:#7C3AED!important;color:#fff!important;padding:9px 12px!important;font-size:12px!important;font-weight:950!important;cursor:pointer!important;box-shadow:0 10px 22px rgba(124,58,237,.22)!important;}
.tq-wb-v2 .tq-special-spinner small{font-size:10px!important;font-weight:900!important;color:var(--text-3)!important;}
.tq-wb-v2 .tq-special-traffic{display:grid!important;grid-template-columns:1fr!important;gap:7px!important;}
.tq-wb-v2 .tq-special-traffic button{border:1px solid rgba(15,23,42,.10)!important;border-radius:14px!important;background:#fff!important;color:var(--text)!important;padding:9px!important;font-size:13px!important;font-weight:950!important;cursor:pointer!important;}
.tq-wb-v2 .tq-special-traffic button.is-selected{background:var(--text)!important;color:#fff!important;border-color:var(--text)!important;}
.tq-wb-v2 .tq-special-traffic{
  width:88px!important;
  margin:auto!important;
  padding:12px!important;
  border-radius:24px!important;
  background:linear-gradient(180deg,var(--text),#020617)!important;
  border:3px solid var(--text-2)!important;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.06),0 12px 26px rgba(15,23,42,.22)!important;
  gap:10px!important;
}
.tq-wb-v2 .tq-special-traffic button{
  display:block!important;
  width:58px!important;
  height:58px!important;
  min-height:58px!important;
  margin:auto!important;
  padding:0!important;
  border-radius:999px!important;
  border:3px solid rgba(255,255,255,.14)!important;
  font-size:0!important;
  color:transparent!important;
  box-shadow:inset 0 8px 14px rgba(255,255,255,.18),inset 0 -10px 18px rgba(0,0,0,.35)!important;
  opacity:.34!important;
}
.tq-wb-v2 .tq-special-traffic button[data-traffic="red"]{background:#EF4444!important;}
.tq-wb-v2 .tq-special-traffic button[data-traffic="amber"]{background:#FACC15!important;}
.tq-wb-v2 .tq-special-traffic button[data-traffic="green"]{background:#22C55E!important;}
.tq-wb-v2 .tq-special-traffic button[data-traffic="red"].is-selected{color:#EF4444!important;}
.tq-wb-v2 .tq-special-traffic button[data-traffic="amber"].is-selected{color:#FACC15!important;}
.tq-wb-v2 .tq-special-traffic button[data-traffic="green"].is-selected{color:#22C55E!important;}
.tq-wb-v2 .tq-special-traffic button.is-selected{
  opacity:1!important;
  border-color:rgba(255,255,255,.72)!important;
  box-shadow:0 0 22px currentColor,inset 0 8px 14px rgba(255,255,255,.26),inset 0 -10px 18px rgba(0,0,0,.28)!important;
}

@media (max-width:700px){
  .tq-wb-v2 .tq-wb-size-l,.tq-wb-v2 .tq-wb-size-xl{width:calc(100vw - 34px)!important;}
  .tq-wb-v2 .tq-special-two{grid-template-columns:1fr!important;}
}

/* v6.20.1b — tarjeta flip real y detalle final */
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2{position:relative!important;}
.tq-wb-v2 .tq-wb-size-btn.active{background:#6C5CE7!important;color:#fff!important;box-shadow:0 4px 10px rgba(108,92,231,.22)!important;}
.tq-wb-v2 .tq-card-flip{border-color:#3B82F6!important;}
.tq-wb-v2 .tq-special-flip{display:grid!important;gap:8px!important;}
.tq-wb-v2 .tq-flip-face{display:grid!important;place-items:center!important;min-height:78px!important;border-radius:16px!important;border:1px solid rgba(15,23,42,.10)!important;padding:12px!important;text-align:center!important;font-family:var(--font-head)!important;font-size:17px!important;font-weight:950!important;color:var(--text)!important;background:#EFF6FF!important;}
.tq-wb-v2 .tq-flip-back{display:none!important;background:#ECFDF5!important;color:#047857!important;}
.tq-wb-v2 .tq-card-flip.is-flipped .tq-flip-front{display:none!important;}
.tq-wb-v2 .tq-card-flip.is-flipped .tq-flip-back{display:grid!important;}
.tq-wb-v2 .tq-flip-btn{border:0!important;border-radius:999px!important;background:#2563EB!important;color:#fff!important;padding:8px 12px!important;font-size:12px!important;font-weight:950!important;cursor:pointer!important;box-shadow:0 10px 22px rgba(37,99,235,.22)!important;}
.tq-wb-v2 .tq-wb-item-stamp .tq-wb-item-tools{display:none!important;}

/* v6.20.2 — teacher-tools polish */
.tq-wb-v2 .tq-wb-teacher-tools{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;}
.tq-wb-v2 .tq-wb-teacher-tools button{min-height:58px!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;gap:3px!important;text-align:left!important;border-radius:18px!important;padding:10px 12px!important;line-height:1.1!important;position:relative!important;overflow:hidden!important;}
.tq-wb-v2 .tq-wb-teacher-tools button b{font-size:13px!important;font-weight:950!important;color:var(--text)!important;white-space:normal!important;}
.tq-wb-v2 .tq-wb-teacher-tools button small{font-size:10px!important;font-weight:850!important;color:var(--text-3)!important;white-space:normal!important;}
.tq-wb-v2 .tq-wb-teacher-tools button:after{content:"";position:absolute;right:-18px;bottom:-24px;width:54px;height:54px;border-radius:999px;background:rgba(255,255,255,.56);}
.tq-wb-v2 .tq-add-note{background:linear-gradient(135deg,#FFFBEB,#FFFFFF)!important;border-color:#F59E0B!important;}
.tq-wb-v2 .tq-add-card,.tq-wb-v2 .tq-add-question,.tq-wb-v2 .tq-add-verbs{background:linear-gradient(135deg,#EFF6FF,#FFFFFF)!important;border-color:#3B82F6!important;}
.tq-wb-v2 .tq-add-text,.tq-wb-v2 .tq-add-title,.tq-wb-v2 .tq-add-objective,.tq-wb-v2 .tq-add-dialogue{background:linear-gradient(135deg,#FFF1F2,#FFFFFF)!important;border-color:#6C5CE7!important;}
.tq-wb-v2 .tq-add-vocab{background:linear-gradient(135deg,#ECFDF5,#FFFFFF)!important;border-color:#10B981!important;}
.tq-wb-v2 .tq-add-gap,.tq-wb-v2 .tq-add-timer,.tq-wb-v2 .tq-add-exit{background:linear-gradient(135deg,#FFF7ED,#FFFFFF)!important;border-color:#F97316!important;}
.tq-wb-v2 .tq-add-spinner,.tq-wb-v2 .tq-add-library{background:linear-gradient(135deg,#F5F3FF,#FFFFFF)!important;border-color:#8B5CF6!important;}

.tq-wb-v2 .tq-wb-item,.tq-wb-v2 .tq-wb-item *{box-sizing:border-box!important;}
.tq-wb-v2 .tq-wb-item-body{overflow-wrap:anywhere!important;word-break:normal!important;min-width:0!important;}
.tq-wb-v2 .tq-vocab-card,.tq-wb-v2 .tq-verb-card,.tq-wb-v2 .tq-special-vocab button,.tq-wb-v2 .tq-special-verbs button{min-width:0!important;max-width:100%!important;overflow:hidden!important;overflow-wrap:anywhere!important;}
.tq-wb-v2 .tq-vocab-card strong,.tq-wb-v2 .tq-vocab-card small,.tq-wb-v2 .tq-vocab-card em,.tq-wb-v2 .tq-verb-card b,.tq-wb-v2 .tq-verb-card span{max-width:100%!important;overflow-wrap:anywhere!important;word-break:break-word!important;}
.tq-wb-v2 .tq-wb-size-s{width:260px!important;}
.tq-wb-v2 .tq-wb-size-s .tq-vocab-grid,.tq-wb-v2 .tq-wb-size-s .tq-verb-grid{grid-template-columns:1fr!important;gap:6px!important;}
.tq-wb-v2 .tq-wb-size-s .tq-vocab-card{display:grid!important;grid-template-columns:34px minmax(0,1fr)!important;grid-template-areas:"emoji word" "emoji trans"!important;align-items:center!important;padding:8px!important;min-height:auto!important;text-align:left!important;}
.tq-wb-v2 .tq-wb-size-s .tq-vocab-card .tq-vocab-emoji{grid-area:emoji!important;font-size:22px!important;}
.tq-wb-v2 .tq-wb-size-s .tq-vocab-card strong{grid-area:word!important;font-size:14px!important;line-height:1.1!important;}
.tq-wb-v2 .tq-wb-size-s .tq-vocab-card small{grid-area:trans!important;font-size:11px!important;line-height:1.1!important;}
.tq-wb-v2 .tq-wb-size-s .tq-vocab-card em{display:none!important;}
.tq-wb-v2 .tq-wb-size-s .tq-widget-help{font-size:10px!important;padding:5px 7px!important;}
.tq-wb-v2 .tq-wb-size-s .tq-wb-item-body{max-height:360px!important;overflow:auto!important;}

.tq-wb-v2 .tq-special-objective,.tq-wb-v2 .tq-special-exit,.tq-wb-v2 .tq-special-match,.tq-wb-v2 .tq-special-sort{display:grid!important;gap:8px!important;}
.tq-wb-v2 .tq-special-objective{padding:8px;border-radius:16px;background:rgba(108,92,231,.06);}
.tq-wb-v2 .tq-special-objective b{font-size:13px;color:#991B1B;}
.tq-wb-v2 .tq-special-objective p{margin:0;padding:9px;border-radius:12px;background:#fff;border:1px dashed rgba(108,92,231,.25);font-weight:850;color:var(--text);}
.tq-wb-v2 .tq-special-objective button,.tq-wb-v2 .tq-special-exit button,.tq-wb-v2 .tq-special-match button,.tq-wb-v2 .tq-special-sort button,.tq-wb-v2 .tq-turn-row button{border:1px solid rgba(15,23,42,.12);background:#fff;border-radius:12px;padding:8px 10px;font-weight:900;color:var(--text-2);cursor:pointer;text-align:left;}
.tq-wb-v2 .tq-special-objective button.is-used,.tq-wb-v2 .tq-special-exit button.is-used,.tq-wb-v2 .tq-special-match button.is-used,.tq-wb-v2 .tq-special-sort button.is-used,.tq-wb-v2 .tq-turn-row button.is-used{background:#DCFCE7!important;border-color:#22C55E!important;color:#166534!important;}
.tq-wb-v2 .tq-special-sort{grid-template-columns:repeat(2,minmax(0,1fr));}
.tq-wb-v2 .tq-special-sort>div{display:grid;gap:7px;padding:8px;border-radius:14px;background:rgba(139,92,246,.08);border:1px solid rgba(139,92,246,.16);}
.tq-wb-v2 .tq-special-sort b{font-size:12px;color:#5B21B6;}
.tq-wb-v2 .tq-special-exit button{background:#FFF7ED;border-color:#FED7AA;}
.tq-wb-v2 .tq-special-match button{background:#ECFDF5;border-color:#BBF7D0;}
.tq-wb-v2 .tq-turn-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:8px;}
.tq-wb-v2 [contenteditable="true"]{outline:none;border-radius:8px;}
.tq-wb-v2 [contenteditable="true"]:focus{box-shadow:0 0 0 2px rgba(108,92,231,.18);background:rgba(255,255,255,.8);}

/* ══════════════════════ v6.20.3 — biblioteca de profesor + vocab rediseñado + media ══════════════════════ */
.tq-wb-v2 .tq-wb-elements-v6203{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;}
.tq-wb-v2 .tq-wb-elements-v6203 button{min-height:64px!important;border-radius:20px!important;padding:11px 12px!important;border-left-width:0!important;border-width:1px!important;box-shadow:0 10px 24px rgba(15,23,42,.06)!important;}
.tq-wb-v2 .tq-wb-elements-v6203 button b{font-size:13px!important;line-height:1.05!important;}
.tq-wb-v2 .tq-wb-elements-v6203 button small{font-size:10px!important;line-height:1.15!important;}
.tq-wb-v2 .tq-wb-elements-v6203 .tq-add-note{background:linear-gradient(145deg,#FEF3C7 0%,#FDE68A 100%)!important;border-color:#F59E0B!important;transform:rotate(-.35deg);}
.tq-wb-v2 .tq-wb-elements-v6203 .tq-add-title{background:linear-gradient(145deg,var(--text),#6C5CE7)!important;border-color:#991B1B!important;color:#fff!important;}
.tq-wb-v2 .tq-wb-elements-v6203 .tq-add-title b,.tq-wb-v2 .tq-wb-elements-v6203 .tq-add-title small{color:#fff!important;}
.tq-wb-v2 .tq-wb-elements-v6203 .tq-add-objective{background:radial-gradient(circle at 20% 20%,#fff 0 22%,#FFF1F2 23% 100%)!important;border-color:#6C5CE7!important;}
.tq-wb-v2 .tq-wb-elements-v6203 .tq-add-card{background:linear-gradient(145deg,#EFF6FF,#DBEAFE)!important;border-color:#2563EB!important;}
.tq-wb-v2 .tq-wb-elements-v6203 .tq-add-vocab{background:linear-gradient(145deg,#ECFDF5,#D1FAE5)!important;border-color:#10B981!important;}
.tq-wb-v2 .tq-wb-elements-v6203 .tq-add-verbs{background:linear-gradient(145deg,#DBEAFE,#EEF2FF)!important;border-color:#3B82F6!important;}
.tq-wb-v2 .tq-wb-elements-v6203 .tq-add-timer{background:linear-gradient(145deg,#0F172A,var(--text-2))!important;border-color:var(--text)!important;color:#fff!important;}
.tq-wb-v2 .tq-wb-elements-v6203 .tq-add-timer b,.tq-wb-v2 .tq-wb-elements-v6203 .tq-add-timer small{color:#fff!important;}
.tq-wb-v2 .tq-wb-elements-v6203 button:hover b{color:var(--text)!important;}
.tq-wb-v2 .tq-wb-elements-v6203 button:hover small{color:var(--text-3)!important;}
.tq-wb-v2 .tq-wb-elements-v6203 .tq-add-title:hover{background:linear-gradient(145deg,var(--text),#6C5CE7)!important;border-color:#991B1B!important;color:#fff!important;}
.tq-wb-v2 .tq-wb-elements-v6203 .tq-add-timer:hover{background:linear-gradient(145deg,#0F172A,var(--text-2))!important;border-color:var(--text)!important;color:#fff!important;}
.tq-wb-v2 .tq-wb-elements-v6203 .tq-add-title:hover b,
.tq-wb-v2 .tq-wb-elements-v6203 .tq-add-title:hover small,
.tq-wb-v2 .tq-wb-elements-v6203 .tq-add-timer:hover b,
.tq-wb-v2 .tq-wb-elements-v6203 .tq-add-timer:hover small{color:#fff!important;}
.tq-wb-v2 .tq-wb-elements-v6203 .tq-add-image{background:linear-gradient(145deg,#F5F3FF,#EDE9FE)!important;border-color:#8B5CF6!important;}
.tq-wb-v2 .tq-wb-elements-v6203 .tq-add-youtube{background:linear-gradient(145deg,#FEE2E2,#fff)!important;border-color:#EF4444!important;}
.tq-wb-v2 .tq-wb-elements-v6203 .tq-add-spinner{background:linear-gradient(145deg,#F3E8FF,#FAE8FF)!important;border-color:#A855F7!important;}
.tq-wb-v2 .tq-wb-elements-v6203 .tq-add-traffic{background:linear-gradient(145deg,#ECFDF5,#DCFCE7)!important;border-color:#22C55E!important;}
.tq-wb-v2 .tq-wb-elements-v6203 .tq-add-exit{background:linear-gradient(145deg,#FFF7ED,#FFEDD5)!important;border-color:#F97316!important;}
.tq-wb-v2 .tq-wb-elements-v6203 .tq-add-library{background:linear-gradient(145deg,var(--bg),var(--border))!important;border-color:var(--text-3)!important;}

.tq-wb-v2 .tq-card-note{background:#FEF3C7!important;border-color:#F59E0B!important;border-radius:9px 22px 22px 22px!important;box-shadow:0 18px 30px rgba(180,83,9,.18)!important;transform:rotate(-.4deg);}
.tq-wb-v2 .tq-card-note::after{content:"";position:absolute;right:0;bottom:0;border-width:0 0 28px 28px;border-style:solid;border-color:transparent transparent rgba(180,83,9,.18) transparent;border-bottom-right-radius:18px;pointer-events:none;}
.tq-wb-v2 .tq-card-note .tq-wb-item-body{font-family:"Comic Sans MS", "Nunito", cursive!important;font-size:16px!important;line-height:1.35!important;color:#78350F!important;}
.tq-wb-v2 .tq-card-title{background:transparent!important;border:0!important;box-shadow:none!important;}
.tq-wb-v2 .tq-card-title .tq-wb-item-head{background:rgba(255,255,255,.88)!important;border:1px solid rgba(108,92,231,.12)!important;border-radius:999px!important;padding:5px 7px!important;margin-bottom:6px!important;}
.tq-wb-v2 .tq-card-title .tq-wb-item-body{font-family:var(--font-head)!important;font-weight:950!important;line-height:.98!important;color:#6C5CE7!important;text-shadow:0 2px 0 rgba(255,255,255,.95)!important;background:transparent!important;text-align:center!important;}
.tq-wb-v2 .tq-card-title.tq-wb-size-s .tq-wb-item-body{font-size:28px!important;}
.tq-wb-v2 .tq-card-title.tq-wb-size-m .tq-wb-item-body{font-size:38px!important;}
.tq-wb-v2 .tq-card-title.tq-wb-size-l .tq-wb-item-body{font-size:52px!important;}
.tq-wb-v2 .tq-card-title.tq-wb-size-xl .tq-wb-item-body{font-size:68px!important;}

.tq-wb-v2 .tq-vocab-visual{display:grid!important;gap:9px!important;}
.tq-wb-v2 .tq-vocab-live{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;gap:10px!important;align-items:center!important;padding:12px!important;border-radius:20px!important;background:linear-gradient(135deg,#ECFDF5,#FFFFFF)!important;border:1px solid rgba(16,185,129,.22)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)!important;min-height:82px!important;}
.tq-wb-v2 .tq-vocab-live-emoji{display:grid!important;place-items:center!important;width:56px!important;height:56px!important;border-radius:18px!important;background:#10B981!important;color:#fff!important;font-size:34px!important;box-shadow:0 10px 20px rgba(16,185,129,.22)!important;}
.tq-wb-v2 .tq-vocab-live strong{display:block!important;font-family:var(--font-head)!important;font-size:23px!important;font-weight:950!important;color:#064E3B!important;line-height:1.02!important;overflow-wrap:anywhere!important;}
.tq-wb-v2 .tq-vocab-live small{display:block!important;margin-top:3px!important;font-size:12px!important;font-weight:950!important;color:#047857!important;overflow-wrap:anywhere!important;}
.tq-wb-v2 .tq-vocab-live em{display:block!important;margin-top:5px!important;font-size:11px!important;font-weight:850!important;font-style:normal!important;color:var(--text-2)!important;overflow-wrap:anywhere!important;}
.tq-wb-v2 .tq-vocab-token-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;}
.tq-wb-v2 .tq-vocab-token{display:flex!important;align-items:center!important;gap:7px!important;min-width:0!important;border:1px solid rgba(16,185,129,.18)!important;border-radius:999px!important;background:#fff!important;color:#064E3B!important;padding:7px 8px!important;font-size:12px!important;font-weight:950!important;cursor:pointer!important;box-shadow:0 5px 12px rgba(15,23,42,.04)!important;}
.tq-wb-v2 .tq-vocab-token span{flex:0 0 auto!important;font-size:17px!important;}
.tq-wb-v2 .tq-vocab-token b{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
.tq-wb-v2 .tq-vocab-token.is-active{background:#10B981!important;color:#fff!important;border-color:#10B981!important;box-shadow:0 8px 18px rgba(16,185,129,.22)!important;}
.tq-wb-v2 .tq-wb-size-s .tq-vocab-live{grid-template-columns:1fr!important;text-align:center!important;padding:10px!important;}
.tq-wb-v2 .tq-wb-size-s .tq-vocab-live-emoji{margin:auto!important;width:46px!important;height:46px!important;font-size:28px!important;}
.tq-wb-v2 .tq-wb-size-s .tq-vocab-live strong{font-size:18px!important;}
.tq-wb-v2 .tq-wb-size-s .tq-vocab-token-grid{grid-template-columns:1fr!important;}
.tq-wb-v2 .tq-wb-size-l .tq-vocab-token-grid,.tq-wb-v2 .tq-wb-size-xl .tq-vocab-token-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}

.tq-wb-v2 .tq-special-vocab-wall{display:grid!important;gap:9px!important;}
.tq-wb-v2 .tq-special-vocab-focus{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;align-items:center!important;gap:10px!important;padding:12px!important;border-radius:20px!important;background:linear-gradient(135deg,#10B981,#047857)!important;color:#fff!important;box-shadow:0 14px 24px rgba(16,185,129,.22)!important;}
.tq-wb-v2 .tq-special-vocab-focus>span{display:grid!important;place-items:center!important;width:58px!important;height:58px!important;border-radius:18px!important;background:rgba(255,255,255,.18)!important;font-size:34px!important;}
.tq-wb-v2 .tq-special-vocab-focus b{display:block!important;font-family:var(--font-head)!important;font-size:24px!important;line-height:1!important;color:#fff!important;overflow-wrap:anywhere!important;}
.tq-wb-v2 .tq-special-vocab-focus small{display:block!important;margin-top:5px!important;font-size:12px!important;font-weight:900!important;color:rgba(255,255,255,.86)!important;overflow-wrap:anywhere!important;}
.tq-wb-v2 .tq-special-vocab-bank{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;}
.tq-wb-v2 .tq-special-vocab-bank button{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;grid-template-areas:"icon word" "icon meaning"!important;align-items:center!important;gap:2px 7px!important;border:1px solid rgba(16,185,129,.18)!important;border-radius:15px!important;background:#fff!important;padding:8px!important;text-align:left!important;cursor:pointer!important;}
.tq-wb-v2 .tq-special-vocab-bank button>span{grid-area:icon!important;font-size:20px!important;}
.tq-wb-v2 .tq-special-vocab-bank b{grid-area:word!important;font-size:12.5px!important;line-height:1.1!important;color:#064E3B!important;overflow-wrap:anywhere!important;}
.tq-wb-v2 .tq-special-vocab-bank small{grid-area:meaning!important;font-size:10.5px!important;line-height:1.1!important;color:#047857!important;overflow-wrap:anywhere!important;}
.tq-wb-v2 .tq-special-vocab-bank button.is-used{background:#DCFCE7!important;border-color:#22C55E!important;}
.tq-wb-v2 .tq-wb-size-s .tq-special-vocab-focus{grid-template-columns:1fr!important;text-align:center!important;}
.tq-wb-v2 .tq-wb-size-s .tq-special-vocab-focus>span{margin:auto!important;width:48px!important;height:48px!important;font-size:28px!important;}
.tq-wb-v2 .tq-wb-size-s .tq-special-vocab-bank{grid-template-columns:1fr!important;}
.tq-wb-v2 .tq-wb-size-xl .tq-special-vocab-bank{grid-template-columns:repeat(3,minmax(0,1fr))!important;}

.tq-wb-v2 .tq-card-timer{background:#0F172A!important;border-color:var(--text)!important;color:#fff!important;}
.tq-wb-v2 .tq-card-timer .tq-wb-item-title{color:#fff!important;}
.tq-wb-v2 .tq-card-timer .tq-wb-item-head{border-bottom-color:rgba(255,255,255,.10)!important;}
.tq-wb-v2 .tq-card-timer .tq-wb-item-tools{background:rgba(255,255,255,.10)!important;border-color:rgba(255,255,255,.14)!important;}
.tq-wb-v2 .tq-card-timer .tq-wb-size-btn,.tq-wb-v2 .tq-card-timer .tq-wb-item-close{color:#fff!important;}
.tq-wb-v2 .tq-special-timer{display:grid!important;gap:12px!important;text-align:center!important;padding:6px 4px 4px!important;}
.tq-wb-v2 .tq-timer-clock{font-family:var(--font-head)!important;font-size:54px!important;line-height:1!important;color:#6C5CE7!important;text-shadow:0 0 16px rgba(108,92,231,.45),0 2px 0 rgba(0,0,0,.45)!important;letter-spacing:.02em!important;font-variant-numeric:tabular-nums!important;font-weight:950!important;}
.tq-wb-v2 .tq-card-timer.is-done{background:#7F1D1D!important;animation:tqWbPulse .8s ease-in-out infinite alternate!important;}
.tq-wb-v2 .tq-card-timer.is-done .tq-timer-clock{color:#FECACA!important;text-shadow:0 0 18px rgba(254,202,202,.6),0 2px 0 rgba(0,0,0,.5)!important;animation:tqTimerClockBeat .65s ease-in-out infinite alternate!important;}
@keyframes tqTimerClockBeat{from{transform:scale(1)}to{transform:scale(1.06)}}
.tq-wb-v2 .tq-timer-bar{height:10px!important;border-radius:999px!important;background:rgba(255,255,255,.16)!important;overflow:hidden!important;}
.tq-wb-v2 .tq-timer-bar span{display:block!important;height:100%!important;width:100%;border-radius:999px!important;background:#6C5CE7!important;transition:width .25s linear!important;}
.tq-wb-v2 .tq-card-timer.is-done .tq-timer-bar span{background:#fff!important;}
.tq-wb-v2 .tq-timer-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;}
.tq-wb-v2 .tq-timer-actions button{border:0!important;border-radius:999px!important;background:#fff!important;color:var(--text)!important;font-size:11px!important;font-weight:950!important;padding:9px!important;cursor:pointer!important;text-transform:uppercase!important;letter-spacing:.04em!important;transition:transform .12s ease,background .12s ease!important;}
.tq-wb-v2 .tq-timer-actions button:hover{transform:translateY(-1px)!important;background:#FEF2F2!important;color:#6C5CE7!important;}
.tq-wb-v2 .tq-timer-actions button:active{transform:translateY(0)!important;}

.tq-wb-v2 .tq-media-image,.tq-wb-v2 .tq-media-youtube{display:grid!important;gap:8px!important;}
.tq-wb-v2 .tq-media-image img{display:block!important;width:100%!important;max-height:360px!important;object-fit:contain!important;border-radius:18px!important;background:var(--bg)!important;border:1px solid rgba(15,23,42,.10)!important;}
.tq-wb-v2 .tq-media-youtube iframe{display:block!important;width:100%!important;aspect-ratio:16/9!important;border:0!important;border-radius:18px!important;background:var(--text)!important;}
.tq-wb-v2 .tq-media-caption{min-height:34px!important;border-radius:14px!important;background:#fff!important;border:1px dashed rgba(15,23,42,.16)!important;padding:9px 10px!important;font-size:12px!important;font-weight:850!important;color:var(--text-2)!important;}
.tq-wb-v2 .tq-card-image{border-color:#8B5CF6!important;}
.tq-wb-v2 .tq-card-youtube{border-color:#6C5CE7!important;}
.tq-wb-hidden-file{display:none!important;}

.tq-wb-v2 .tq-library-flipdeck{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;}
.tq-wb-v2 .tq-lib-flip{display:grid!important;align-content:start!important;min-height:96px!important;border:1px solid rgba(37,99,235,.22)!important;border-radius:16px!important;background:#EFF6FF!important;color:#1E3A8A!important;padding:11px!important;font-weight:950!important;text-align:left!important;cursor:pointer!important;box-shadow:0 8px 18px rgba(37,99,235,.08)!important;overflow:visible!important;}
.tq-wb-v2 .tq-lib-flip b{display:block!important;font-size:13px!important;line-height:1.22!important;overflow-wrap:anywhere!important;}
.tq-wb-v2 .tq-lib-flip span{display:none!important;margin-top:7px!important;font-size:12px!important;line-height:1.25!important;color:#047857!important;}
.tq-wb-v2 .tq-lib-flip.is-open{background:#ECFDF5!important;border-color:#10B981!important;color:#064E3B!important;}
.tq-wb-v2 .tq-lib-flip.is-open span{display:block!important;}
.tq-wb-v2 .tq-card-libdeck{min-width:min(460px,calc(100% - 18px))!important;}
.tq-wb-v2 .tq-card-libdeck .tq-wb-item-body{background:#fff!important;}
.tq-wb-v2 .tq-wb-size-s .tq-library-flipdeck{grid-template-columns:1fr!important;}
.tq-wb-v2 .tq-wb-size-xl .tq-library-flipdeck{grid-template-columns:repeat(3,minmax(0,1fr))!important;}

.tq-wb-v2 .tq-card-convdeck{min-width:min(580px,calc(100% - 18px))!important;}
.tq-wb-v2 .tq-card-convdeck .tq-wb-item-body{background:#fff!important;padding:10px!important;}
.tq-wb-v2 .tq-wb-convdeck{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;white-space:normal!important;}
.tq-wb-v2 .tq-wb-conv-card{display:flex!important;flex-direction:column!important;min-width:0!important;overflow:hidden!important;border:1px solid rgba(15,23,42,.10)!important;border-radius:18px!important;background:#fff!important;box-shadow:0 8px 20px rgba(15,23,42,.07)!important;}
.tq-wb-v2 .tq-wb-conv-card-top{display:flex!important;align-items:center!important;gap:8px!important;padding:10px 12px!important;background:var(--conv-color,#6C5CE7)!important;color:#fff!important;}
.tq-wb-v2 .tq-wb-conv-card-top span{display:grid!important;place-items:center!important;width:24px!important;height:24px!important;border-radius:999px!important;background:rgba(255,255,255,.22)!important;font-size:11px!important;font-weight:1000!important;flex:0 0 auto!important;}
.tq-wb-v2 .tq-wb-conv-card-top strong{min-width:0!important;flex:1 1 auto!important;color:#fff!important;font-family:var(--font-head)!important;font-size:13px!important;font-weight:950!important;line-height:1.18!important;overflow-wrap:anywhere!important;}
.tq-wb-v2 .tq-wb-conv-card-top b{font-size:20px!important;line-height:1!important;flex:0 0 auto!important;}
.tq-wb-v2 .tq-wb-conv-card-body{display:grid!important;gap:8px!important;padding:10px!important;color:var(--text-2)!important;font-size:12px!important;font-weight:800!important;line-height:1.35!important;}
.tq-wb-v2 .tq-wb-conv-situation{margin:0!important;padding:9px 10px!important;border-radius:12px!important;background:var(--bg)!important;border:1px solid rgba(15,23,42,.08)!important;color:var(--text)!important;font-style:italic!important;}
.tq-wb-v2 .tq-wb-conv-translation{margin:0!important;color:var(--text-3)!important;font-size:11.5px!important;font-style:italic!important;}
.tq-wb-v2 .tq-wb-conv-block{display:grid!important;gap:6px!important;}
.tq-wb-v2 .tq-wb-conv-block small{font-size:9.5px!important;font-weight:1000!important;letter-spacing:.07em!important;text-transform:uppercase!important;color:var(--text-3)!important;}
.tq-wb-v2 .tq-wb-conv-wordbank{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;}
.tq-wb-v2 .tq-wb-conv-wordbank span{display:grid!important;gap:1px!important;min-width:0!important;padding:7px 8px!important;border-radius:11px!important;background:var(--surface-2)!important;border:1px solid rgba(15,23,42,.08)!important;}
.tq-wb-v2 .tq-wb-conv-wordbank b{color:var(--text)!important;font-size:11.5px!important;line-height:1.12!important;overflow-wrap:anywhere!important;}
.tq-wb-v2 .tq-wb-conv-wordbank em{color:var(--text-3)!important;font-size:10.5px!important;font-style:normal!important;line-height:1.12!important;overflow-wrap:anywhere!important;}
.tq-wb-v2 .tq-wb-conv-chips{display:flex!important;flex-wrap:wrap!important;gap:5px!important;}
.tq-wb-v2 .tq-wb-conv-chips span{border-radius:999px!important;background:var(--surface-2)!important;border:1px solid rgba(15,23,42,.08)!important;padding:5px 8px!important;color:var(--text-2)!important;font-size:11px!important;font-weight:950!important;}
.tq-wb-v2 .tq-wb-conv-bubble{margin:0!important;padding:8px 10px!important;border-radius:13px!important;font-size:12px!important;line-height:1.35!important;font-weight:850!important;overflow-wrap:anywhere!important;}
.tq-wb-v2 .tq-wb-conv-q{background:#EFF6FF!important;border:1px solid #BFDBFE!important;color:#1E40AF!important;border-top-left-radius:4px!important;}
.tq-wb-v2 .tq-wb-conv-a{background:#F0FDF4!important;border:1px solid #BBF7D0!important;color:#166534!important;border-top-right-radius:4px!important;}
.tq-wb-v2 .tq-wb-size-s .tq-wb-convdeck,
.tq-wb-v2 .tq-wb-size-m .tq-wb-convdeck{grid-template-columns:1fr!important;}
.tq-wb-v2 .tq-wb-size-s .tq-wb-conv-wordbank{grid-template-columns:1fr!important;}
.tq-wb-v2 .tq-wb-size-xl .tq-wb-convdeck{grid-template-columns:repeat(2,minmax(0,1fr))!important;}

.tq-wb-v2 .tq-card-quick-chat{min-width:min(440px,calc(100% - 18px))!important;border-color:#7C3AED!important;}
.tq-wb-v2 .tq-card-quick-chat .tq-wb-item-body{background:#fff!important;padding:10px!important;}
.tq-wb-v2 .tq-wb-chat-widget{display:grid!important;gap:9px!important;white-space:normal!important;}
.tq-wb-v2 .tq-wb-chat-log{display:grid!important;gap:7px!important;max-height:260px!important;overflow:auto!important;padding:4px!important;-webkit-overflow-scrolling:touch!important;}
.tq-wb-v2 .tq-wb-chat-msg{display:grid!important;gap:3px!important;padding:8px 10px!important;border-radius:14px!important;font-size:12px!important;line-height:1.35!important;font-weight:800!important;overflow-wrap:anywhere!important;}
.tq-wb-v2 .tq-wb-chat-msg b{font-size:10px!important;font-weight:1000!important;letter-spacing:.06em!important;text-transform:uppercase!important;}
.tq-wb-v2 .tq-wb-chat-msg.assistant{justify-self:start!important;background:#F5F3FF!important;border:1px solid #DDD6FE!important;color:#4C1D95!important;}
.tq-wb-v2 .tq-wb-chat-msg.user{justify-self:end!important;background:#EFF6FF!important;border:1px solid #BFDBFE!important;color:#1E3A8A!important;}
.tq-wb-v2 .tq-wb-chat-msg.is-loading span{opacity:.72!important;}
.tq-wb-v2 .tq-wb-chat-chips{display:flex!important;gap:6px!important;flex-wrap:wrap!important;}
.tq-wb-v2 .tq-wb-chat-chips button{border:1px solid rgba(124,58,237,.20)!important;border-radius:999px!important;background:#FAF5FF!important;color:#581C87!important;font-size:10.5px!important;font-weight:950!important;padding:6px 8px!important;cursor:pointer!important;}
.tq-wb-v2 .tq-wb-chat-form{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:7px!important;align-items:end!important;}
.tq-wb-v2 .tq-wb-chat-form textarea{min-height:50px!important;max-height:110px!important;resize:vertical!important;border:1px solid rgba(15,23,42,.12)!important;border-radius:14px!important;background:#fff!important;color:var(--text)!important;font:800 13px/1.35 var(--font-body, Inter, system-ui, sans-serif)!important;padding:9px 10px!important;outline:none!important;box-shadow:none!important;}
.tq-wb-v2 .tq-wb-chat-form textarea:focus{border-color:#7C3AED!important;box-shadow:0 0 0 3px rgba(124,58,237,.12)!important;}
.tq-wb-v2 .tq-wb-chat-form button{border:0!important;border-radius:14px!important;background:#7C3AED!important;color:#fff!important;font-size:12px!important;font-weight:1000!important;padding:10px 12px!important;cursor:pointer!important;box-shadow:0 8px 18px rgba(124,58,237,.20)!important;}
.tq-wb-v2 .tq-wb-chat-form button:disabled{opacity:.6!important;cursor:wait!important;}
.tq-wb-v2 .tq-wb-size-s .tq-wb-chat-form{grid-template-columns:1fr!important;}

@media (max-width:520px){.tq-wb-v2 .tq-wb-elements-v6203{grid-template-columns:1fr!important;}}

/* Super Pizarra 6.20.6 — biblioteca, juegos y textos dentro del canvas */
.tq-card-board-game .tq-wb-item-body{padding:0;background:#fff;overflow:hidden}
.tq-wb-game-shell{border-radius:18px;overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px rgba(15,23,42,.06)}
.tq-wb-game-head{display:flex;align-items:center;gap:10px;padding:12px 14px;background:linear-gradient(135deg,#fff1f1,#fff);border-bottom:1px solid rgba(108,92,231,.12)}
.tq-wb-game-head>span{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:#6C5CE7;color:#fff;box-shadow:0 10px 20px rgba(108,92,231,.18)}
.tq-wb-game-head b{display:block;font-family:var(--font-head);font-size:18px;color:var(--text);line-height:1}
.tq-wb-game-head small{display:block;margin-top:4px;color:var(--text-3);font-size:12px;font-weight:700}
.tq-wb-game-live{padding:14px}
.tq-wb-choice-score,.tq-wb-pairs-score{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;color:#065f46;font-weight:900;font-size:13px}
.tq-wb-choice-score span{background:#ecfdf5;border-radius:999px;padding:6px 10px}
.tq-wb-choice-prompt{padding:12px;border-radius:15px;background:#fff;border:1px solid rgba(15,23,42,.08);font-weight:900;color:var(--text);margin-bottom:10px}
.tq-wb-choice-grid{display:grid;grid-template-columns:1fr;gap:8px}
.tq-wb-choice-grid button,.tq-wb-choice-controls button,.tq-wb-pairs button,.tq-wb-game-bank button,.tq-wb-keypad button,.tq-wb-next-word,.tq-wb-sopa-words button,.tq-wb-memory-grid button,.tq-wb-order button,.tq-wb-who button,.tq-wb-roulette button{border:1px solid rgba(15,23,42,.1);background:#fff;border-radius:14px;padding:10px 12px;font-weight:900;color:var(--text);cursor:pointer;box-shadow:0 4px 14px rgba(15,23,42,.04);transition:transform .15s ease,background .15s ease,border-color .15s ease}
.tq-wb-choice-grid button:hover,.tq-wb-pairs button:hover,.tq-wb-memory-grid button:hover,.tq-wb-game-bank button:hover{transform:translateY(-1px)}
.tq-wb-choice-grid button.is-correct,.tq-wb-pairs button.is-matched,.tq-wb-memory-grid button.is-matched,.tq-wb-sopa button.is-used,.tq-wb-game-bank button.is-used,.tq-wb-order button.is-used{background:#dcfce7;border-color:#22c55e;color:#166534}
.tq-wb-choice-grid button.is-wrong,.tq-wb-pairs button.is-wrong{background:#fee2e2;border-color:#ef4444;color:#991b1b}
.tq-wb-choice-controls{display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:8px;margin-top:10px}
.tq-wb-choice-controls button,.tq-wb-next-word,.tq-wb-roulette button{background:#101828;color:#fff;border-color:#101828}
.tq-wb-game-feedback{margin-top:10px;border-radius:14px;background:#fff7ed;border:1px solid #fed7aa;padding:9px 11px;color:#9a3412;font-weight:800;font-size:13px}
.tq-wb-pairs{display:grid;grid-template-columns:1fr 1fr;gap:10px}.tq-wb-pairs>div{display:grid;gap:8px}.tq-wb-pairs button.is-selected{background:#eff6ff;border-color:#2563eb;color:#1d4ed8}
.tq-wb-memory-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.tq-wb-memory-grid button{min-height:72px;display:grid;place-items:center;text-align:center}.tq-wb-memory-grid b{display:none}.tq-wb-memory-grid button.is-open b,.tq-wb-memory-grid button.is-matched b{display:block}.tq-wb-memory-grid button.is-open span,.tq-wb-memory-grid button.is-matched span{display:none}
.tq-wb-hangman{display:grid;grid-template-columns:110px 1fr;gap:12px;align-items:start}.tq-wb-hangman-draw{background:var(--bg);border-radius:18px;min-height:160px;padding:12px;text-align:center;display:grid;gap:8px;place-items:center}.tq-wb-hangman-draw span{font-size:42px}.tq-wb-hangman-draw small{color:var(--text-3);font-weight:800}.tq-wb-hangword{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}.tq-wb-hangword b,.tq-wb-hangword span{min-width:20px;text-align:center;border-bottom:3px solid var(--text);font-size:21px;line-height:1.3}.tq-wb-hangword b:not(.show){color:transparent}.tq-wb-keypad{display:flex;flex-wrap:wrap;gap:5px}.tq-wb-keypad button{padding:7px 9px;border-radius:10px;font-size:12px}.tq-wb-keypad button:disabled{opacity:.45}.tq-wb-next-word{margin-top:10px;width:100%}
.tq-wb-sopa{display:grid;grid-template-columns:minmax(190px,1fr) minmax(140px,.7fr);gap:12px}.tq-wb-sopa-grid{display:grid;gap:3px;background:#fff7ed;border:1px solid #fed7aa;border-radius:16px;padding:8px}.tq-wb-sopa-grid button{aspect-ratio:1/1;border:0;border-radius:8px;background:#fff;font-weight:900;color:var(--text)}.tq-wb-sopa-words{display:grid;align-content:start;gap:7px}.tq-wb-sopa-words button,.tq-wb-game-bank button{text-align:left;display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center}.tq-wb-sopa-words small,.tq-wb-game-bank small{grid-column:2;color:var(--text-3)}.tq-wb-game-bank{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tq-wb-order div{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}.tq-wb-order small{display:block;color:var(--text-3);font-weight:800}.tq-wb-who-card{padding:14px;border-radius:18px;background:var(--bg);border:1px dashed rgba(15,23,42,.18);font-weight:900;margin:10px 0}.tq-wb-who div:last-of-type{display:flex;flex-wrap:wrap;gap:8px}.tq-wb-who .ans{display:block;margin-top:10px;font-size:26px;color:#6C5CE7}.tq-wb-roulette{text-align:center;display:grid;place-items:center;gap:10px}.tq-wb-roulette .wheel{width:96px;height:96px;border-radius:999px;background:conic-gradient(#6C5CE7,#f97316,#facc15,#22c55e,#2563eb,#7c3aed,#6C5CE7);display:grid;place-items:center;font-size:40px;box-shadow:0 16px 35px rgba(15,23,42,.14)}.tq-wb-roulette strong{font-size:28px;color:var(--text)}
.tq-text-widget{background:#fff;border:1px solid rgba(108,92,231,.14);border-radius:20px;overflow:hidden;box-shadow:0 14px 35px rgba(15,23,42,.08)}
.tq-text-ribbon{display:flex;align-items:center;justify-content:space-between;gap:10px;background:linear-gradient(135deg,#6C5CE7,#ff7a59);color:#fff;padding:12px 14px;font-weight:900}.tq-text-ribbon b{font-size:11px;text-transform:uppercase;letter-spacing:.08em;opacity:.85}.tq-text-widget h3{margin:14px 16px 4px;font-family:var(--font-head);font-size:24px;color:var(--text)}.tq-text-body{padding:8px 16px 4px;font-size:16px;line-height:1.55;color:var(--text)}.tq-text-body p{margin:0 0 12px}.tq-text-gloss{margin:8px 14px;padding:12px;border-radius:16px;background:#fff7ed;border:1px solid #fed7aa}.tq-text-gloss>b,.tq-text-questions>b{display:block;margin-bottom:8px;color:#9a3412}.tq-text-gloss>div{display:flex;flex-wrap:wrap;gap:6px}.tq-text-gloss span{background:#fff;border-radius:999px;padding:7px 10px;font-weight:800;color:var(--text);border:1px solid rgba(15,23,42,.08)}.tq-text-questions{padding:4px 14px 12px;display:grid;gap:7px}.tq-text-questions button,.tq-text-actions button{border:1px solid rgba(15,23,42,.1);background:#fff;border-radius:14px;padding:9px 11px;font-weight:900;color:var(--text);text-align:left;cursor:pointer}.tq-text-actions{display:flex;flex-wrap:wrap;gap:8px;padding:0 14px 14px}.tq-text-actions button{background:#101828;color:#fff}.tq-text-questions button.is-used,.tq-text-actions button.is-used{background:#dcfce7;border-color:#22c55e;color:#166534}
@media (max-width:760px){.tq-wb-sopa,.tq-wb-hangman{grid-template-columns:1fr}.tq-wb-memory-grid{grid-template-columns:repeat(2,1fr)}.tq-wb-game-bank{grid-template-columns:1fr}}


/* v6.20.6 — whiteboard stability: card headers are drag handles, not editable text. */
.tq-wb-v2 .tq-wb-item-title{pointer-events:none!important;user-select:none!important;-webkit-user-select:none!important;}
.tq-wb-v2 .tq-wb-item-head{touch-action:none!important;}
.tq-wb-v2 .tq-wb-item-body [contenteditable="true"]{cursor:text!important;}

/* v6.20.6 — safe placement: cards never leave the visible whiteboard. */
.tq-wb-v2 .tq-wb-item{
  max-width:calc(100% - 18px)!important;
  max-height:calc(100% - 18px)!important;
}
.tq-wb-v2 .tq-wb-item-body{
  overscroll-behavior:contain!important;
}
.tq-wb-v2 .tq-wb-long-text-safe{
  min-width:min(520px, calc(100% - 18px))!important;
}
.tq-wb-v2 .tq-wb-long-text-safe .tq-wb-item-body,
.tq-wb-v2 .tq-wb-widget-text .tq-wb-item-body{
  overflow:auto!important;
  -webkit-overflow-scrolling:touch!important;
}
.tq-wb-v2 .tq-wb-long-text-safe .tq-text-body,
.tq-wb-v2 .tq-wb-widget-text .tq-text-body{
  max-height:clamp(170px, 34vh, 430px)!important;
  overflow:auto!important;
  -webkit-overflow-scrolling:touch!important;
}
.tq-wb-v2 .tq-wb-widget-text .tq-text-widget{
  display:grid!important;
  grid-template-rows:auto auto minmax(0,1fr) auto auto!important;
}
.tq-wb-v2 .tq-wb-size-s .tq-text-body{
  max-height:220px!important;
}
.tq-wb-v2 .tq-wb-size-m .tq-text-body{
  max-height:280px!important;
}
.tq-wb-v2 .tq-wb-size-l .tq-text-body,
.tq-wb-v2 .tq-wb-size-xl .tq-text-body{
  max-height:360px!important;
}
.tq-wb-v2 .tq-media-youtube iframe,
.tq-wb-v2 .tq-media-image img{
  max-height:calc(100vh - 260px)!important;
  object-fit:contain!important;
}

/* v6.20.7 — whiteboard game reset, live quiz code and smarter vocab icons */
.tq-wb-v2 .tq-choice-actions{grid-template-columns:1fr 1fr 1fr 1fr!important;}
.tq-wb-v2 .tq-choice-reset,.tq-wb-v2 .tq-match-reset{background:#fff!important;color:#6C5CE7!important;border:1px solid rgba(108,92,231,.22)!important;box-shadow:0 6px 16px rgba(108,92,231,.08)!important;}
.tq-wb-v2 .tq-match-score{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;}
.tq-wb-v2 .tq-match-reset{font-size:11px!important;border-radius:999px!important;padding:6px 10px!important;font-weight:950!important;cursor:pointer!important;}
.tq-wb-game-head .tq-wb-game-reset{margin-left:auto;border:1px solid rgba(108,92,231,.18);background:#fff;color:#6C5CE7;border-radius:999px;padding:7px 10px;font-size:11px;font-weight:950;cursor:pointer;box-shadow:0 8px 18px rgba(108,92,231,.08);white-space:nowrap;}
.tq-wb-game-head .tq-wb-game-reset:hover{transform:translateY(-1px);background:#F1EFFD;}
.tq-wb-v2 .tq-wb-choice-controls{grid-template-columns:1fr 1fr 1.2fr 1.1fr!important;}
.tq-wb-v2 .tq-wb-choice-controls .reset{background:#fff!important;color:#6C5CE7!important;border-color:rgba(108,92,231,.22)!important;}
.tq-wb-quiz-join{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px 10px;padding:12px 14px;border-radius:18px;background:linear-gradient(135deg,#6C5CE7,#ff6b6b);color:#fff;box-shadow:0 14px 28px rgba(108,92,231,.18);}
.tq-wb-quiz-join span{font-size:11px;font-weight:950;text-transform:uppercase;letter-spacing:.08em;opacity:.86;}
.tq-wb-quiz-join strong{font-family:var(--font-head);font-size:30px;line-height:1;text-align:right;letter-spacing:.08em;}
.tq-wb-quiz-join small{grid-column:1/-1;font-size:11px;font-weight:800;opacity:.9;word-break:break-all;}
@media (max-width:520px){.tq-wb-v2 .tq-choice-actions,.tq-wb-v2 .tq-wb-choice-controls{grid-template-columns:1fr 1fr!important;}.tq-wb-game-head{flex-wrap:wrap}.tq-wb-game-head .tq-wb-game-reset{width:100%;}}

/* v6.20.9 — auto snap, board transform mode and safer board captures */
.tq-wb-v2 .tq-wb-snapped{
  animation:tqWbSnapPulse .24s ease-out;
}
@keyframes tqWbSnapPulse{
  0%{box-shadow:0 0 0 0 rgba(108,92,231,.18),0 18px 45px rgba(15,23,42,.12)}
  100%{box-shadow:0 0 0 9px rgba(108,92,231,0),0 18px 45px rgba(15,23,42,.12)}
}
.tq-wb-v2 .tq-wb-ai-convert{
  grid-column:1/-1!important;
  justify-content:center!important;
  border-color:rgba(108,92,231,.26)!important;
  background:linear-gradient(135deg,#fff 0%,#f4f2ff 100%)!important;
  color:#991b1b!important;
  box-shadow:0 12px 28px rgba(108,92,231,.10)!important;
}
.tq-wb-v2 .tq-wb-ai-convert:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 34px rgba(108,92,231,.16)!important;
}
.tq-wb-v2 .tq-wb-studio-note{
  border-left:3px solid rgba(108,92,231,.35);
}


/* v6.20.9 — whiteboard performance mode for embedded browsers / smart boards */
.tq-wb-v2.tq-wb-lite .tq-wb-item,
.tq-wb-v2.tq-wb-lite .tq-wb-stage,
.tq-wb-v2.tq-wb-lite .tq-wb-dock,
.tq-wb-v2.tq-wb-lite .tq-wb-topbar {
  box-shadow: none !important;
  transition: none !important;
}
.tq-wb-v2.tq-wb-lite .tq-wb-item { backdrop-filter: none !important; }
.tq-wb-v2.tq-wb-lite * { scroll-behavior: auto !important; }


/* v6.21.1 — safe in-app confirmation, avoids native dialogs breaking fullscreen */
.pedro-confirm-overlay{position:fixed;inset:0;z-index:2147483646;background:rgba(15,23,42,.36);display:flex;align-items:center;justify-content:center;padding:20px;}
.pedro-confirm-card{width:min(420px,100%);background:#fff;border-radius:24px;box-shadow:0 24px 80px rgba(15,23,42,.28);border:1px solid rgba(108,92,231,.16);padding:20px;}
.pedro-confirm-card strong{display:block;font-family:Outfit,Inter,sans-serif;font-size:20px;letter-spacing:-.03em;color:var(--text);margin-bottom:8px;}
.pedro-confirm-card p{margin:0 0 18px;color:var(--text-3);line-height:1.45;font-weight:700;}
.pedro-confirm-card div{display:flex;justify-content:flex-end;gap:10px;}
.pedro-confirm-card button{border:0;border-radius:14px;padding:10px 16px;font-weight:900;cursor:pointer;}
.pedro-confirm-cancel{background:#f3f4f6;color:#374151;}
.pedro-confirm-ok{background:#6C5CE7;color:#fff;}

/* v6.21.8 — iPad / Apple Pencil stability layer */
#pedro-ai-app.pedro-whiteboard-mode,
#pedro-ai-app.pedro-whiteboard-mode .pedro-whiteboard-panel-wrapper,
#pedro-ai-app.pedro-whiteboard-mode .tq-whiteboard-shell,
#pedro-ai-app.pedro-whiteboard-mode .tq-whiteboard-stage,
#pedro-ai-app.pedro-whiteboard-mode #tq-whiteboard-canvas,
#pedro-ai-app.pedro-whiteboard-mode .tq-whiteboard-elements,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-item,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-item-head{
  -webkit-user-select:none!important;
  user-select:none!important;
  -webkit-touch-callout:none!important;
  -webkit-tap-highlight-color:transparent!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-whiteboard-stage,
#pedro-ai-app.pedro-whiteboard-mode #tq-whiteboard-canvas{
  touch-action:none!important;
  overscroll-behavior:none!important;
  -ms-touch-action:none!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-item,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-item-head{
  touch-action:none!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-dock,
#pedro-ai-app.pedro-whiteboard-mode .tq-whiteboard-library{
  touch-action:pan-y!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior:contain!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-item-body[contenteditable="true"],
#pedro-ai-app.pedro-whiteboard-mode input,
#pedro-ai-app.pedro-whiteboard-mode textarea,
#pedro-ai-app.pedro-whiteboard-mode select{
  -webkit-user-select:text!important;
  user-select:text!important;
  -webkit-touch-callout:default!important;
  touch-action:auto!important;
}
#pedro-ai-app.pedro-ios-fullscreen{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  overflow:hidden!important;
}
#pedro-ai-app.pedro-whiteboard-mode.tq-wb-ipad-pencil .tq-wb-command-bar,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-ipad-pencil .tq-wb-command-bar{
  -webkit-user-select:none!important;
  user-select:none!important;
}
@supports (-webkit-touch-callout:none) {
  #pedro-ai-app.pedro-whiteboard-mode .tq-whiteboard-stage{cursor:default!important;}
}

/* v6.21.9 — iPad fullscreen repair */
#tq-wb-fullscreen[aria-pressed="true"],
#pedro-fullscreen-btn[aria-pressed="true"]{
  background:var(--text)!important;
  color:#fff!important;
  border-color:var(--text)!important;
}
.tq-wb-fullscreen-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:38px!important;
}
html.pedro-ios-fullscreen-active,
body.pedro-ios-fullscreen-active{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
  -webkit-overflow-scrolling:auto!important;
}
#pedro-ai-app.pedro-ios-fullscreen,
#pedro-ai-app.pedro-css-fullscreen.pedro-ios-fullscreen{
  position:fixed!important;
  top:0!important;
  left:0!important;
  right:0!important;
  bottom:auto!important;
  width:var(--pedro-ios-vw,100vw)!important;
  height:var(--pedro-ios-vh,100dvh)!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  z-index:2147483647!important;
  overflow:hidden!important;
  transform:none!important;
  background:var(--bg)!important;
}
@supports (-webkit-touch-callout:none){
  #pedro-ai-app.pedro-ai-ios-capable #pedro-fullscreen-btn,
  #pedro-ai-app.pedro-ai-ios-capable .pedro-desktop-only#pedro-fullscreen-btn{
    display:inline-flex!important;
  }
  #pedro-ai-app.pedro-ios-fullscreen .pedro-wow-topbar{
    padding-top:env(safe-area-inset-top)!important;
  }
  #pedro-ai-app.pedro-ios-fullscreen .tq-whiteboard-shell{
    height:100%!important;
    max-height:100%!important;
  }
}
@media (min-width: 769px) and (max-width: 1180px) and (hover: none) and (pointer: coarse){
  #pedro-ai-app #pedro-fullscreen-btn.pedro-desktop-only{
    display:inline-flex!important;
  }
}


/* v6.22.0 — one fullscreen control only + iPad platform fallback */
/* The whiteboard no longer has its own fullscreen button; the platform button controls the whole app. */
#tq-wb-fullscreen,
.tq-wb-fullscreen-btn{
  display:none!important;
}
html.pedro-ai-ios-device #pedro-ai-app #pedro-fullscreen-btn,
body.pedro-ai-ios-device #pedro-ai-app #pedro-fullscreen-btn,
#pedro-ai-app.pedro-ai-ios-capable #pedro-fullscreen-btn,
#pedro-ai-app.pedro-ai-ios-capable .pedro-desktop-only#pedro-fullscreen-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
}
#pedro-ai-app.pedro-ios-fullscreen .pedro-wow-main,
#pedro-ai-app.pedro-ios-fullscreen .pedro-wow-layout,
#pedro-ai-app.pedro-ios-fullscreen .pedro-wow-workspace,
#pedro-ai-app.pedro-ios-fullscreen .pedro-ai-content{
  min-height:0!important;
  height:100%!important;
}
#pedro-ai-app.pedro-ios-fullscreen #pedro-whiteboard-panel.active{
  height:100%!important;
}
@media (hover:none) and (pointer:coarse){
  #pedro-ai-app.pedro-ai-ios-capable #pedro-fullscreen-btn.pedro-desktop-only{
    display:inline-flex!important;
  }
}

/* v6.22.1 — iPad fullscreen fallback + smoother board polish */
html.pedro-ai-ios-device #pedro-ai-app #pedro-fullscreen-btn,
body.pedro-ai-ios-device #pedro-ai-app #pedro-fullscreen-btn,
#pedro-ai-app.pedro-ai-ios-capable #pedro-fullscreen-btn.pedro-desktop-only{
  display:inline-flex!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
}
#pedro-ai-app.pedro-ios-fullscreen,
#pedro-ai-app.pedro-css-fullscreen.pedro-ios-fullscreen{
  position:fixed!important;
  inset:0!important;
  top:0!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  width:100vw!important;
  width:var(--pedro-ios-vw,100vw)!important;
  height:100vh!important;
  height:100svh!important;
  height:var(--pedro-ios-vh,100dvh)!important;
  max-width:none!important;
  max-height:none!important;
  overflow:hidden!important;
  border-radius:0!important;
  z-index:2147483647!important;
  background:var(--bg)!important;
}
#pedro-ai-app.pedro-ios-fullscreen .pedro-wow-workspace,
#pedro-ai-app.pedro-ios-fullscreen .pedro-ai-content,
#pedro-ai-app.pedro-ios-fullscreen .pedro-ai-panel.active,
#pedro-ai-app.pedro-ios-fullscreen .pedro-wow-panel-stage,
#pedro-ai-app.pedro-ios-fullscreen .tq-whiteboard-shell,
#pedro-ai-app.pedro-ios-fullscreen .tq-whiteboard-stage{
  min-height:0!important;
}
#pedro-ai-app.pedro-whiteboard-mode #tq-whiteboard-canvas{
  touch-action:none!important;
  -webkit-user-select:none!important;
  user-select:none!important;
  image-rendering:auto!important;
}


/* v6.22.2 — app viewport shield: never reveal the underlying WordPress site */
html.pedro-ai-shell-active,
body.pedro-ai-shell-active{
  margin:0!important;
  padding:0!important;
  width:100%!important;
  min-width:100%!important;
  height:100%!important;
  min-height:100%!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
  background:var(--bg)!important;
}
#pedro-ai-page-shield,
.pedro-ai-page-shield{
  position:fixed!important;
  inset:0!important;
  top:var(--pedro-safe-top,0)!important;
  left:var(--pedro-safe-left,0)!important;
  width:var(--pedro-safe-vw,100vw)!important;
  height:var(--pedro-safe-vh,100dvh)!important;
  min-width:100vw!important;
  min-height:100vh!important;
  min-height:100dvh!important;
  background:var(--wow-bg,var(--bg))!important;
  z-index:2147483646!important;
  pointer-events:none!important;
  border:0!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
}
#pedro-ai-app.pedro-is-fullscreen,
#pedro-ai-app[data-pedro-always-fullscreen="1"]{
  position:fixed!important;
  inset:0!important;
  top:0!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  width:100vw!important;
  width:var(--pedro-safe-vw,100vw)!important;
  height:100vh!important;
  height:100svh!important;
  height:var(--pedro-safe-vh,100dvh)!important;
  min-width:100vw!important;
  min-height:100vh!important;
  min-height:100svh!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  transform:none!important;
  z-index:2147483647!important;
  overflow:hidden!important;
  background:var(--wow-bg,var(--bg))!important;
  box-shadow:none!important;
  isolation:isolate!important;
  contain:layout paint!important;
}
#pedro-ai-app[data-pedro-always-fullscreen="1"] .pedro-wow-layout{
  min-height:0!important;
  height:100%!important;
  max-height:100%!important;
}
#pedro-ai-app[data-pedro-always-fullscreen="1"] .pedro-wow-main,
#pedro-ai-app[data-pedro-always-fullscreen="1"] .pedro-wow-workspace,
#pedro-ai-app[data-pedro-always-fullscreen="1"] .pedro-ai-content{
  min-height:0!important;
  max-height:100%!important;
}
@supports (-webkit-touch-callout:none){
  #pedro-ai-app.pedro-is-fullscreen,
  #pedro-ai-app[data-pedro-always-fullscreen="1"],
  #pedro-ai-page-shield{
    width:var(--pedro-safe-vw,100vw)!important;
    height:var(--pedro-safe-vh,100dvh)!important;
  }
}

/* v6.22.3 — Super Pizarra navegable + texto rico + colaboración */
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2-stage,
#pedro-ai-app.pedro-whiteboard-mode .tq-whiteboard-stage{
  overflow:auto!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior:contain!important;
  scrollbar-width:thin!important;
  scrollbar-color:rgba(15,23,42,.20) transparent!important;
}
.tq-whiteboard-world{
  position:relative!important;
  width:1600px;
  height:1200px;
  min-width:100%;
  min-height:100%;
  background:inherit!important;
  background-size:inherit!important;
  transform:none;
  transform-origin:0 0;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-whiteboard-world #tq-whiteboard-canvas{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-whiteboard-world .tq-whiteboard-elements,
#pedro-ai-app.pedro-whiteboard-mode .tq-whiteboard-world .tq-whiteboard-empty{
  position:absolute!important;
}
.tq-wb-hand-active .tq-whiteboard-stage,
.tq-whiteboard-stage.tq-wb-hand-active,
.tq-wb-hand-active #tq-whiteboard-canvas{cursor:grab!important;}
.tq-wb-hand-active .tq-whiteboard-stage:active,
.tq-whiteboard-stage.tq-wb-hand-active:active{cursor:grabbing!important;}
.tq-wb-hand-active .tq-wb-item{cursor:move!important;}
/* v6.27.0 — cursor coherente por herramienta seleccionada */
.tq-wb-tool-eraser #tq-whiteboard-canvas{cursor:cell!important;}
.tq-wb-tool-highlighter #tq-whiteboard-canvas{cursor:crosshair!important;}
.tq-wb-tool-line #tq-whiteboard-canvas,
.tq-wb-tool-arrow #tq-whiteboard-canvas,
.tq-wb-tool-rect #tq-whiteboard-canvas,
.tq-wb-tool-circle #tq-whiteboard-canvas{cursor:crosshair!important;}
.tq-wb-tool-pen #tq-whiteboard-canvas{cursor:crosshair!important;}
.tq-wb-v2 .tq-wb-dock-grid .tq-add-rich-text{background:linear-gradient(135deg,#fff,#eff6ff)!important;border-color:#bfdbfe!important;}
.tq-wb-v2 .tq-wb-dock-grid .tq-add-collab{background:linear-gradient(135deg,#fff,#F1EFFD)!important;border-color:#D5CEF8!important;}
.tq-card-rich-text{background:linear-gradient(135deg,#eff6ff,#fff)!important;border-color:#93c5fd!important;}
.tq-card-student-note{background:linear-gradient(135deg,#fffbeb,#fff)!important;border-style:dashed!important;}
.tq-rich-toolbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:-2px 0 10px;padding:7px;border:1px solid rgba(15,23,42,.08);border-radius:14px;background:rgba(255,255,255,.74);}
.tq-rich-toolbar span{flex:1 1 6px;min-width:6px;}
.tq-rich-color{width:24px;height:24px;border:2px solid #fff;border-radius:999px;background:var(--c);box-shadow:0 0 0 1px rgba(15,23,42,.12);cursor:pointer;}
.tq-rich-color.active{box-shadow:0 0 0 3px rgba(108,92,231,.22);}
.tq-rich-size,.tq-rich-format{border:1px solid rgba(15,23,42,.12);background:#fff;border-radius:10px;min-width:28px;height:28px;font-size:11px;font-weight:950;cursor:pointer;color:#0f172a;}
.tq-rich-size.active,.tq-rich-size:hover,.tq-rich-format:hover{background:var(--text);color:#fff;border-color:var(--text);}
.tq-rich-text-editor{min-height:96px;padding:8px 4px;outline:none;font-family:var(--font-head);font-size:24px;font-weight:900;line-height:1.16;color:var(--text);white-space:pre-wrap;word-break:break-word;}
.tq-rich-text-editor:empty:before{content:attr(data-placeholder);color:rgba(15,23,42,.30);pointer-events:none;}
.tq-collab-card{display:grid;gap:9px;}
.tq-collab-code{display:inline-grid;place-items:center;justify-self:start;padding:9px 13px;border-radius:16px;background:var(--text);color:#fff;font-family:var(--font-head);font-size:28px;font-weight:1000;letter-spacing:.08em;box-shadow:0 12px 24px rgba(15,23,42,.20);}
.tq-collab-card p{margin:0;color:var(--text-3);font-size:12px;font-weight:800;line-height:1.35;white-space:normal;}
.tq-collab-link{width:100%;border:1px dashed rgba(108,92,231,.28);border-radius:12px;background:#fff;padding:9px 10px;font-size:11px;font-weight:800;color:var(--text-2);}
.tq-collab-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.tq-collab-actions button{border:0;border-radius:12px;background:#6C5CE7;color:#fff;font-size:12px;font-weight:950;padding:9px 10px;cursor:pointer;}
.tq-collab-actions button:last-child{background:var(--text);}
.tq-collab-card small{font-size:10px;font-weight:850;color:var(--text-3);}
@media (max-width:720px){.tq-collab-code{font-size:22px}.tq-rich-text-editor{font-size:22px}}

/* v6.22.4 — Collab QR + richer text field polish */
.tq-rich-toolbar{gap:5px!important;align-items:center!important;}
.tq-rich-bg{width:28px;height:28px;border:1px solid rgba(15,23,42,.12);border-radius:10px;background:#fff7c2;color:#92400e;font-size:13px;font-weight:950;cursor:pointer;}
.tq-rich-align{border:1px solid rgba(15,23,42,.12);background:#fff;border-radius:10px;min-width:28px;height:28px;font-size:12px;font-weight:950;cursor:pointer;color:#0f172a;}
.tq-rich-bg:hover,.tq-rich-align:hover{background:var(--text)!important;color:#fff!important;border-color:var(--text)!important;}
.tq-rich-text-editor font[size="3"]{font-size:18px;}
.tq-rich-text-editor font[size="4"]{font-size:24px;}
.tq-rich-text-editor font[size="5"]{font-size:34px;}
.tq-rich-text-editor font[size="6"]{font-size:46px;}
.tq-collab-top{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;}
.tq-collab-qr{width:112px;height:112px;border-radius:20px;border:1px solid rgba(15,23,42,.10);background:#fff;padding:8px;box-shadow:0 14px 30px rgba(15,23,42,.10);display:grid;place-items:center;}
.tq-collab-qr img{width:100%;height:100%;display:block;border-radius:12px;}
.tq-collab-link{font-size:10px!important;}
.tq-wb-download-white,#tq-wb-download{background:#fff!important;color:var(--text)!important;border:1px solid rgba(15,23,42,.10)!important;box-shadow:0 8px 20px rgba(15,23,42,.08)!important;}
.tq-wb-download-white:hover,#tq-wb-download:hover{background:var(--bg)!important;color:#6C5CE7!important;}
.p-csv-vocab-btn{background:#fff!important;color:var(--text)!important;border:1px solid rgba(15,23,42,.10)!important;}
@media (max-width:720px){.tq-collab-top{grid-template-columns:1fr}.tq-collab-qr{width:96px;height:96px;justify-self:start}.tq-rich-toolbar{gap:4px!important}.tq-rich-size,.tq-rich-format,.tq-rich-align,.tq-rich-bg{min-width:26px!important;height:26px!important}}

/* v6.22.5 — edición fiable en iPad/táctil y tarjetas editables sin botones inválidos */
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-editable,
#pedro-ai-app.pedro-whiteboard-mode [contenteditable="true"].tq-wb-editable{
  -webkit-user-select:text!important;
  user-select:text!important;
  -webkit-touch-callout:default!important;
  touch-action:manipulation!important;
  cursor:text!important;
}
.tq-wb-v2 .tq-card-title .tq-wb-item-body{
  pointer-events:auto!important;
  -webkit-user-select:text!important;
  user-select:text!important;
  touch-action:manipulation!important;
  cursor:text!important;
  min-height:1.15em!important;
}
.tq-wb-v2 .tq-card-title .tq-wb-item-head{
  pointer-events:auto!important;
}
.tq-wb-v2 .tq-tap{
  box-sizing:border-box!important;
  min-width:0!important;
  user-select:none!important;
  -webkit-user-select:none!important;
}
.tq-wb-v2 .tq-special-vocab-bank .tq-tap{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr)!important;
  grid-template-areas:"icon word" "icon meaning"!important;
  align-items:center!important;
  gap:2px 7px!important;
  border:1px solid rgba(16,185,129,.18)!important;
  border-radius:15px!important;
  background:#fff!important;
  padding:8px!important;
  text-align:left!important;
  cursor:pointer!important;
}
.tq-wb-v2 .tq-special-vocab-bank .tq-tap>span{grid-area:icon!important;font-size:20px!important;}
.tq-wb-v2 .tq-special-vocab-bank .tq-tap b{grid-area:word!important;font-size:12.5px!important;line-height:1.1!important;color:#064E3B!important;overflow-wrap:anywhere!important;}
.tq-wb-v2 .tq-special-vocab-bank .tq-tap small{grid-area:meaning!important;font-size:10.5px!important;line-height:1.1!important;color:#047857!important;overflow-wrap:anywhere!important;}
.tq-wb-v2 .tq-special-vocab-bank .tq-tap.is-used{background:#DCFCE7!important;border-color:#22C55E!important;}
.tq-wb-v2 .tq-special-verbs .tq-tap,
.tq-wb-v2 .tq-special-gaps .tq-tap,
.tq-wb-v2 .tq-special-exit .tq-tap,
.tq-wb-v2 .tq-special-match .tq-tap,
.tq-wb-v2 .tq-special-sort .tq-tap{
  border:1px solid rgba(15,23,42,.1)!important;
  border-radius:14px!important;
  background:#fff!important;
  padding:10px 12px!important;
  font-weight:900!important;
  color:var(--text)!important;
  cursor:pointer!important;
  box-shadow:0 4px 14px rgba(15,23,42,.04)!important;
}
.tq-wb-v2 .tq-special-verbs .tq-tap.is-used,
.tq-wb-v2 .tq-special-gaps .tq-tap.is-used,
.tq-wb-v2 .tq-special-exit .tq-tap.is-used,
.tq-wb-v2 .tq-special-match .tq-tap.is-used,
.tq-wb-v2 .tq-special-sort .tq-tap.is-used{
  background:#dcfce7!important;
  border-color:#22c55e!important;
  color:#166534!important;
}
.tq-wb-v2 .tq-special-verbs .tq-tap{display:grid!important;gap:3px!important;}
.tq-wb-v2 .tq-special-verbs .tq-tap b{font-size:15px!important;color:#1d4ed8!important;}
.tq-wb-v2 .tq-special-verbs .tq-tap span{font-size:12px!important;color:var(--text-3)!important;}
.tq-wb-v2 .tq-tap [contenteditable="true"],
.tq-wb-v2 .tq-tap[contenteditable="true"]{
  -webkit-user-select:text!important;
  user-select:text!important;
  touch-action:manipulation!important;
  cursor:text!important;
}
#pedro-ai-app.pedro-whiteboard-mode #tq-whiteboard-canvas{
  -webkit-user-drag:none!important;
  image-rendering:auto!important;
}

/* v6.22.7 — pizarra nítida, estable al abrir/cerrar panel y zoom */
#pedro-ai-app.pedro-whiteboard-mode .tq-whiteboard-stage,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2-stage{
  overflow:auto!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
}
.tq-whiteboard-viewport{
  position:relative!important;
  display:block!important;
  min-width:100%!important;
  min-height:100%!important;
  overflow:visible!important;
  transform:none!important;
}
.tq-whiteboard-viewport > .tq-whiteboard-world{
  position:absolute!important;
  left:0!important;
  top:0!important;
  min-width:0!important;
  min-height:0!important;
  transform-origin:0 0!important;
  backface-visibility:hidden!important;
  background:inherit!important;
  background-size:inherit!important;
}
#pedro-ai-app.pedro-whiteboard-mode #tq-whiteboard-canvas{
  cursor:crosshair!important;
  touch-action:none!important;
  -webkit-user-select:none!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
  image-rendering:auto!important;
}
.tq-wb-v2-topbar .tq-wb-v2-zoom{
  gap:4px!important;
  background:rgba(239,246,255,.92)!important;
  border-color:rgba(37,99,235,.14)!important;
}
.tq-wb-v2-topbar .tq-wb-zoom-btn{
  min-width:32px!important;
  padding-left:9px!important;
  padding-right:9px!important;
  font-size:16px!important;
  line-height:1!important;
}
.tq-wb-v2-topbar .tq-wb-zoom-reset{
  min-width:58px!important;
  font-variant-numeric:tabular-nums!important;
}
.tq-whiteboard-stage.tq-wb-zooming #tq-whiteboard-canvas{
  pointer-events:none!important;
}


/* v6.22.7 — estado correcto del panel, trazo más nítido y menos repintado */
.tq-wb-toggle-dock-btn[aria-pressed="false"]{background:#fff!important;color:var(--text)!important;border-color:rgba(15,23,42,.16)!important;}
.tq-wb-toggle-dock-btn[aria-pressed="true"]{background:var(--text)!important;color:#fff!important;border-color:var(--text)!important;}
#pedro-ai-app.pedro-whiteboard-mode #tq-whiteboard-world,
#pedro-ai-app.pedro-whiteboard-mode #tq-whiteboard-elements{
  contain:layout paint size!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-item{
  contain:layout paint!important;
  transform:translateZ(0)!important;
  backface-visibility:hidden!important;
}
#pedro-ai-app.pedro-whiteboard-mode #tq-whiteboard-canvas{
  transform:translateZ(0)!important;
  backface-visibility:hidden!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-ai-convert{
  grid-column:1 / -1!important;
  border-color:rgba(124,58,237,.32)!important;
  background:linear-gradient(135deg,#F5F3FF 0%,#FFFFFF 100%)!important;
}

/* v6.22.8 — quizzes mínimos de 10 + widgets IA más ricos sin duplicar controles */
.tq-wb-toggle-dock-btn.is-active,
.tq-wb-toggle-dock-btn[aria-pressed="true"]{background:var(--text)!important;color:#fff!important;border-color:var(--text)!important;box-shadow:0 8px 20px rgba(15,23,42,.18)!important;}
.tq-wb-toggle-dock-btn:not(.is-active),
.tq-wb-toggle-dock-btn[aria-pressed="false"]{background:#fff!important;color:var(--text)!important;border-color:rgba(15,23,42,.16)!important;box-shadow:none!important;}
.tq-wb-ai-pills{display:flex;gap:5px;flex-wrap:wrap;margin:7px 0 3px;}
.tq-wb-ai-pills span{font-size:10px;font-weight:950;letter-spacing:.01em;border-radius:999px;background:rgba(15,23,42,.07);color:var(--text);padding:4px 7px;}
.tq-choice-dots{display:flex;gap:5px;flex-wrap:wrap;margin:6px 0 8px;}
.tq-choice-dots button{width:24px;height:24px;border-radius:999px;border:1px solid rgba(15,23,42,.13);background:#fff;font-size:10px;font-weight:950;color:var(--text-3);cursor:pointer;}
.tq-choice-dots button.is-active{background:var(--text);color:#fff;border-color:var(--text);}
.tq-choice-actions{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
.tq-choice-actions .tq-choice-random,
.tq-choice-actions .tq-choice-reveal{background:#fff7ed!important;border-color:rgba(234,88,12,.25)!important;color:#9a3412!important;}
.tq-choice-feedback{min-height:24px;}
.tq-match-score{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;}
.tq-match-score div{display:flex;gap:6px;flex-wrap:wrap;}
.tq-match-solve{border:0;border-radius:999px;padding:7px 10px;font-size:11px;font-weight:950;background:#fff7ed;color:#9a3412;cursor:pointer;}
.tq-match-solution{margin-top:10px;display:grid;gap:5px;font-size:12px;}
.tq-match-solution span{background:rgba(15,23,42,.05);border:1px solid rgba(15,23,42,.08);border-radius:9px;padding:6px 8px;}
.tq-vocab-challenge{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.tq-vocab-challenge button{border:0;border-radius:999px;background:#ecfeff;color:#0e7490;font-weight:950;font-size:11px;padding:8px 10px;cursor:pointer;}
.tq-vocab-quiz-mode .tq-vocab-live small,
.tq-vocab-quiz-mode .tq-vocab-live em{filter:blur(5px);opacity:.55;user-select:none;}
.tq-vocab-quiz-mode .tq-vocab-live strong::after{content:'  · di el significado antes de revelar';font-size:11px;font-weight:800;color:var(--text-3);}
@media(max-width:700px){.tq-choice-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}.tq-choice-dots button{width:22px;height:22px}}

/* v6.22.9 — emparejar con respuestas ocultas + tarjetas IA accionables */
.tq-wb-v2 .tq-match-hint{margin:6px 0 8px!important;padding:7px 9px!important;border-radius:11px!important;background:var(--bg)!important;border:1px dashed rgba(15,23,42,.13)!important;color:var(--text-3)!important;font-size:11px!important;font-weight:850!important;}
.tq-wb-v2 .tq-match-token-answer,.tq-wb-pair-answer{position:relative!important;overflow:hidden!important;min-height:40px!important;}
.tq-wb-v2 .tq-match-token-answer .tq-match-answer-text,.tq-wb-pair-answer .tq-pair-answer-text{display:inline!important;}
.tq-wb-v2 .tq-match-token-answer.is-concealed .tq-match-answer-text,.tq-wb-pair-answer.is-concealed .tq-pair-answer-text{filter:blur(7px)!important;opacity:0!important;user-select:none!important;}
.tq-wb-v2 .tq-match-token-answer .tq-match-mask,.tq-wb-pair-answer .tq-pair-mask{display:none!important;}
.tq-wb-v2 .tq-match-token-answer.is-concealed .tq-match-mask,.tq-wb-pair-answer.is-concealed .tq-pair-mask{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:5px!important;position:absolute!important;inset:6px!important;border-radius:10px!important;background:linear-gradient(135deg,var(--text),var(--text-2))!important;color:#fff!important;font-size:11px!important;font-weight:950!important;letter-spacing:.02em!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)!important;}
.tq-wb-v2 .tq-match-token-answer.is-concealed .tq-match-mask:before,.tq-wb-pair-answer.is-concealed .tq-pair-mask:before{content:'🔒'!important;}
.tq-wb-v2 .tq-match-token-answer.is-revealed:not(.is-matched),.tq-wb-pair-answer.is-revealed:not(.is-matched){background:#EFF6FF!important;border-color:rgba(37,99,235,.35)!important;color:#1D4ED8!important;}
.tq-wb-v2 .tq-match-solve{background:var(--text)!important;color:#fff!important;}
.tq-action-widget{display:grid!important;gap:9px!important;}
.tq-action-ribbon{display:grid!important;gap:4px!important;padding:10px 11px!important;border-radius:15px!important;background:linear-gradient(135deg,var(--bg),#FFFFFF)!important;border:1px solid rgba(15,23,42,.10)!important;}
.tq-action-ribbon span{width:max-content!important;padding:4px 7px!important;border-radius:999px!important;background:var(--text)!important;color:#fff!important;font-size:9.5px!important;font-weight:950!important;text-transform:uppercase!important;letter-spacing:.06em!important;}
.tq-action-ribbon b{font-size:12px!important;line-height:1.25!important;color:var(--text-2)!important;font-weight:900!important;}
.tq-action-intro{margin:0!important;padding:9px 10px!important;border-radius:13px!important;background:#FFF7ED!important;border:1px solid rgba(234,88,12,.18)!important;color:#7C2D12!important;font-size:12.5px!important;font-weight:850!important;line-height:1.35!important;}
.tq-action-script,.tq-action-success{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;gap:8px!important;align-items:start!important;padding:8px 9px!important;border-radius:13px!important;background:var(--bg)!important;border:1px solid rgba(15,23,42,.08)!important;color:var(--text-2)!important;}
.tq-action-script b,.tq-action-success b{display:inline-flex!important;align-items:center!important;width:max-content!important;border-radius:999px!important;padding:3px 7px!important;background:var(--text)!important;color:#fff!important;font-size:9px!important;font-weight:950!important;text-transform:uppercase!important;letter-spacing:.04em!important;}
.tq-action-script span,.tq-action-success span{font-size:11.5px!important;font-weight:850!important;line-height:1.32!important;}
.tq-action-success{background:#F0FDF4!important;border-color:#BBF7D0!important;color:#166534!important;}
.tq-action-success b{background:#16A34A!important;}
.tq-action-steps{display:grid!important;gap:7px!important;}
.tq-action-step{display:grid!important;grid-template-columns:24px minmax(0,1fr)!important;align-items:center!important;gap:8px!important;text-align:left!important;border:1px solid rgba(15,23,42,.10)!important;background:#fff!important;color:var(--text)!important;border-radius:13px!important;padding:8px 9px!important;font-weight:900!important;cursor:pointer!important;box-shadow:0 5px 14px rgba(15,23,42,.04)!important;}
.tq-action-step b{display:grid!important;place-items:center!important;width:24px!important;height:24px!important;border-radius:999px!important;background:var(--surface-2)!important;color:var(--text-2)!important;font-size:11px!important;}
.tq-action-step span{font-size:12px!important;line-height:1.25!important;}
.tq-action-step.is-focus{outline:3px solid rgba(245,158,11,.28)!important;border-color:#F59E0B!important;}
.tq-action-step.is-done{background:#DCFCE7!important;border-color:#22C55E!important;color:#166534!important;}
.tq-action-step.is-done b{background:#22C55E!important;color:#fff!important;}
.tq-action-step.is-done b:before{content:'✓'!important;}
.tq-action-step.is-done b{font-size:0!important;}
.tq-action-step.is-done span{text-decoration:line-through!important;}
.tq-action-tools{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important;}
.tq-action-tools button{border:0!important;border-radius:999px!important;background:var(--surface-2)!important;color:var(--text-2)!important;font-size:11px!important;font-weight:950!important;padding:8px 10px!important;cursor:pointer!important;}
.tq-action-tools .tq-action-random{background:#6C5CE7!important;color:#fff!important;box-shadow:0 8px 18px rgba(108,92,231,.18)!important;}
@media(max-width:520px){.tq-action-tools{grid-template-columns:1fr!important}.tq-wb-v2 .tq-match-hint{font-size:10.5px!important}}

/* v6.23.0 — capas, exportación limpia, transformador y pulido visual */
.tq-wb-v2 .tq-wb-item{
  box-shadow:0 14px 32px rgba(15,23,42,.10)!important;
  border-width:1.5px!important;
  transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease, outline-color .18s ease;
}
.tq-wb-v2 .tq-wb-item:hover{box-shadow:0 18px 42px rgba(15,23,42,.14)!important;}
.tq-wb-v2 .tq-wb-item.is-selected{outline:3px solid rgba(108,92,231,.45)!important;outline-offset:4px!important;box-shadow:0 22px 55px rgba(108,92,231,.18),0 0 0 1px rgba(108,92,231,.10)!important;}
.tq-wb-v2 .tq-wb-item-head{gap:8px!important;padding:10px 12px!important;border-bottom:1px solid rgba(15,23,42,.06)!important;}
.tq-wb-v2 .tq-wb-item-title{font-size:15px!important;line-height:1.15!important;letter-spacing:-.01em;}
.tq-wb-v2 .tq-wb-item-body{padding:12px!important;line-height:1.42!important;}
.tq-wb-layer-badge{display:inline-grid;place-items:center;min-width:30px;height:22px;padding:0 7px;border-radius:999px;background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;font-size:11px;font-weight:950;white-space:nowrap;}
.tq-wb-layer-box{display:grid;gap:10px;}
.tq-wb-layer-status{padding:9px 10px;border-radius:14px;background:var(--bg);border:1px solid var(--border);color:var(--text-3);font-size:12px;font-weight:800;line-height:1.35;}
.tq-wb-layer-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:5px;}
.tq-wb-layer-grid button,.tq-wb-layer-actions button{border:1px solid var(--border);background:#fff;color:var(--text);border-radius:11px;min-height:32px;font-weight:950;cursor:pointer;box-shadow:0 4px 12px rgba(15,23,42,.04);}
.tq-wb-layer-grid button.is-active{background:var(--text);color:#fff;border-color:var(--text);box-shadow:0 8px 22px rgba(15,23,42,.18);}
.tq-wb-layer-grid button:disabled,.tq-wb-layer-actions button:disabled{opacity:.42;cursor:not-allowed;box-shadow:none;}
.tq-wb-layer-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.tq-wb-layer-actions button{font-size:11px;padding:8px 5px;}
.tq-add-transformer{background:linear-gradient(135deg,#f5f3ff,#fff)!important;border-color:#c4b5fd!important;}
.tq-transform-machine{display:grid;gap:10px;}
.tq-tm-label{font-size:11px;font-weight:950;color:#6d28d9;text-transform:uppercase;letter-spacing:.04em;}
.tq-tm-source,.tq-tm-output{border:1px solid #ddd6fe;border-radius:16px;background:#fff;padding:12px;min-height:44px;font-weight:850;line-height:1.35;color:var(--text);}
.tq-tm-source{background:#faf5ff;outline:none;}
.tq-tm-source:focus{border-color:#8b5cf6;box-shadow:0 0 0 3px rgba(139,92,246,.16);}
.tq-tm-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;}
.tq-tm-controls button,.tq-tm-actions button{border:1px solid #e9d5ff;background:#fff;color:#4c1d95;border-radius:12px;padding:8px 7px;font-size:12px;font-weight:950;cursor:pointer;}
.tq-tm-controls button.is-active{background:#6d28d9;color:#fff;border-color:#6d28d9;box-shadow:0 10px 24px rgba(109,40,217,.18);}
.tq-tm-output{background:var(--bg);border-color:var(--border);color:var(--text);}
.tq-tm-ladder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;}
.tq-tm-ladder span{background:#fff;border:1px solid var(--border);border-radius:999px;padding:7px 9px;font-size:11px;font-weight:900;color:var(--text-3);}
.tq-tm-actions{display:flex;gap:8px;flex-wrap:wrap;}
.tq-tm-actions button{background:#f5f3ff;}
.tq-wb-v2 .tq-wb-dock-grid button,.tq-wb-v2 .tq-wb-studio-modes button{border-radius:16px!important;box-shadow:0 6px 18px rgba(15,23,42,.05)!important;}
.tq-wb-v2 .tq-wb-dock-grid button b{font-size:13px!important;}
.tq-wb-v2 .tq-wb-dock-grid button small{font-size:11px!important;color:var(--text-3)!important;}
.tq-wb-v2 .tq-action-step,.tq-wb-v2 .tq-choice-option,.tq-wb-v2 .tq-match-left,.tq-wb-v2 .tq-match-right{transition:transform .15s ease, box-shadow .15s ease, background .15s ease;}
.tq-wb-v2 .tq-action-step:active,.tq-wb-v2 .tq-choice-option:active,.tq-wb-v2 .tq-match-left:active,.tq-wb-v2 .tq-match-right:active{transform:scale(.985);}
.tq-wb-v2 .tq-choice-feedback,.tq-wb-v2 .tq-match-feedback{border-radius:14px!important;background:var(--bg)!important;border:1px solid var(--border)!important;color:var(--text-3)!important;font-weight:800!important;}
.tq-wb-toggle-dock-btn.is-active,.tq-wb-toggle-dock-btn[aria-pressed="true"]{background:var(--text)!important;color:#fff!important;border-color:var(--text)!important;box-shadow:0 8px 20px rgba(15,23,42,.18)!important;}
.tq-wb-toggle-dock-btn:not(.is-active),.tq-wb-toggle-dock-btn[aria-pressed="false"]{background:#fff!important;color:var(--text)!important;border-color:rgba(15,23,42,.16)!important;box-shadow:none!important;}
@media (max-width:980px){.tq-tm-controls{grid-template-columns:repeat(2,minmax(0,1fr));}.tq-wb-layer-grid{grid-template-columns:repeat(3,1fr);}.tq-wb-layer-actions{grid-template-columns:repeat(2,1fr);}}

/* ══════════════════════ CHAT PRO v10 — Teacher Command Center ══════════════════════ */
#pedro-ai-app .tq-chat-pro {
  background:
    radial-gradient(circle at 12% 0%, rgba(108,92,231,.08), transparent 34%),
    linear-gradient(180deg, #fff 0%, var(--bg) 100%);
}
#pedro-ai-app .tq-chat-hero {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 20px 14px;
  background:linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,241,242,.82));
  border-bottom:1px solid rgba(226,232,240,.9);
  flex-shrink:0;
}
#pedro-ai-app .tq-chat-kicker {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 9px; border-radius:999px;
  background:#F1EFFD; border:1px solid #D5CEF8; color:#5546D6;
  font-size:10px; font-weight:900; letter-spacing:.1em; text-transform:uppercase;
  margin-bottom:7px;
}
#pedro-ai-app .tq-chat-hero h2 { margin:0; font-size:24px; line-height:1.05; letter-spacing:-.04em; color:var(--text); }
#pedro-ai-app .tq-chat-hero p { margin:6px 0 0; max-width:760px; color:var(--text-3); font-size:13px; font-weight:700; line-height:1.45; }
#pedro-ai-app .tq-chat-hero-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
#pedro-ai-app .tq-chat-mini-btn {
  min-height:34px; padding:8px 12px; border-radius:999px;
  border:1px solid var(--border); background:#fff; color:var(--text-2);
  font-size:12px; font-weight:900; cursor:pointer;
  box-shadow:0 8px 24px rgba(15,23,42,.06); transition:all .18s ease;
}
#pedro-ai-app .tq-chat-mini-btn:hover { transform:translateY(-1px); border-color:#D5CEF8; color:#6C5CE7; background:#F7F6FE; }
#pedro-ai-app .tq-chat-context {
  display:grid; grid-template-columns:repeat(4, minmax(130px,1fr)); gap:8px;
  padding:10px 18px; background:rgba(255,255,255,.82); border-bottom:1px solid #e5e7eb;
  flex-shrink:0;
}
#pedro-ai-app .tq-chat-context label {
  display:grid; grid-template-columns:auto 1fr; align-items:center; gap:8px;
  min-height:38px; padding:5px 6px 5px 10px;
  border:1px solid #e5e7eb; border-radius:14px; background:#fff;
}
#pedro-ai-app .tq-chat-context span { font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; color:var(--text-4); }
#pedro-ai-app .tq-chat-context select {
  width:100%; border:0; outline:0; background:var(--bg); border-radius:10px;
  padding:7px 9px; color:#0f172a; font-size:12px; font-weight:900;
}
#pedro-ai-app .tq-chat-quick-actions {
  padding:10px 18px;
  background:linear-gradient(180deg,#fff,#fbfdff);
  gap:8px;
  align-items:center;
}
#pedro-ai-app .tq-chat-strip-label {
  display:inline-flex; align-items:center; min-height:30px; flex-shrink:0;
  font-size:10px; font-weight:900; color:var(--text-4); text-transform:uppercase; letter-spacing:.1em;
  margin-right:2px;
}
#pedro-ai-app .tq-chat-quick-actions .pedro-quick-action {
  border-radius:14px; padding:8px 12px; min-height:36px;
  background:#fff; border-color:var(--border); color:var(--text-2); font-weight:900;
  box-shadow:0 8px 22px rgba(15,23,42,.04);
}
#pedro-ai-app .tq-chat-quick-actions .pedro-quick-action:hover {
  background:#F1EFFD; border-color:#D5CEF8; color:#5546D6; transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(108,92,231,.10);
}
#pedro-ai-app .tq-chat-helper-bar {
  padding:9px 18px;
  background:rgba(248,250,252,.88);
  border-bottom:1px solid #e5e7eb;
}
#pedro-ai-app .tq-chat-helper-bar .pedro-chat-helper-chip,
#pedro-ai-app .tq-chat-helper-bar .pedro-chat-helper-clear {
  min-height:30px; padding:6px 10px; border-radius:12px;
  background:#fff; color:var(--text-3); font-size:11.5px; font-weight:900;
}
#pedro-ai-app .pedro-chat-messages {
  padding:18px 20px 16px;
  gap:16px;
  background:
    linear-gradient(rgba(255,255,255,.86), rgba(255,255,255,.86)),
    radial-gradient(circle at 20px 20px, rgba(148,163,184,.12) 1px, transparent 1px);
  background-size:auto, 24px 24px;
}
#pedro-ai-app .pedro-chat-message { gap:12px; }
#pedro-ai-app .pedro-chat-message .pedro-msg-avatar,
#pedro-ai-app .pedro-typing .pedro-msg-avatar {
  width:38px; height:38px; font-size:17px; box-shadow:0 8px 20px rgba(15,23,42,.08);
}
#pedro-ai-app .pedro-msg-name { font-size:10.5px; font-weight:900; color:var(--text-3); margin-bottom:5px; }
#pedro-ai-app .pedro-chat-bubble {
  max-width:min(860px, 88%);
  border-radius:18px;
  padding:14px 16px;
  line-height:1.62;
  font-size:14px;
}
#pedro-ai-app .pedro-chat-message.assistant .pedro-chat-bubble {
  border:1px solid var(--border);
  box-shadow:0 12px 34px rgba(15,23,42,.07);
}
#pedro-ai-app .pedro-chat-message.user .pedro-chat-bubble {
  border-radius:18px 18px 4px 18px;
  background:linear-gradient(135deg,#6C5CE7,#4C3EC8);
}
#pedro-ai-app .tq-chat-welcome-card .pedro-chat-bubble { max-width:820px; }
#pedro-ai-app .tq-chat-starter-grid {
  display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;
}
#pedro-ai-app .tq-chat-starter {
  border:1px solid var(--border); background:#fff; color:var(--text-2); border-radius:999px;
  min-height:32px; padding:7px 11px; font-size:12px; font-weight:900; cursor:pointer;
  transition:all .18s ease;
}
#pedro-ai-app .tq-chat-starter:hover { background:#F1EFFD; color:#6C5CE7; border-color:#D5CEF8; transform:translateY(-1px); }
#pedro-ai-app .tq-chat-actions-pro {
  gap:7px; max-width:880px;
}
#pedro-ai-app .pedro-chat-action-btn {
  border-radius:12px; min-height:32px; padding:6px 10px;
  background:#fff; color:var(--text-3); font-size:11.5px; font-weight:900;
}
#pedro-ai-app .pedro-chat-action-btn.is-primary {
  background:var(--text); border-color:var(--text); color:#fff;
}
#pedro-ai-app .pedro-chat-action-btn:hover { transform:translateY(-1px); }
#pedro-ai-app .pedro-chat-action-btn.is-primary:hover { background:#6C5CE7; border-color:#6C5CE7; color:#fff; }
#pedro-ai-app .tq-chat-input-wrapper {
  gap:10px; padding:12px 18px 14px;
  background:rgba(255,255,255,.96);
  border-top:1px solid #e5e7eb;
  box-shadow:0 -10px 30px rgba(15,23,42,.04);
}
#pedro-ai-app .tq-chat-input-shell {
  flex:1; min-width:0; display:flex; flex-direction:column; gap:6px;
  border:1.5px solid var(--border); border-radius:18px; background:#fff; padding:8px;
  transition:box-shadow .18s,border-color .18s;
}
#pedro-ai-app .tq-chat-input-shell:focus-within { border-color:#6C5CE7; box-shadow:0 0 0 4px rgba(108,92,231,.10); }
#pedro-ai-app .tq-chat-input-wrapper .pedro-chat-input {
  border:0; background:transparent; padding:6px 8px; min-height:38px; max-height:180px; box-shadow:none!important;
}
#pedro-ai-app .tq-chat-input-tools { display:flex; align-items:center; gap:7px; flex-wrap:wrap; padding:0 2px; }
#pedro-ai-app .tq-chat-input-tool {
  min-height:26px; border:1px solid var(--border); border-radius:999px; background:var(--bg); color:var(--text-3);
  padding:4px 9px; font-size:11px; font-weight:900; cursor:pointer;
}
#pedro-ai-app .tq-chat-input-tool:hover { background:#F1EFFD; color:#6C5CE7; border-color:#D5CEF8; }
#pedro-ai-app #pedro-chat-charcount { margin-left:auto; font-size:10.5px; font-weight:800; color:var(--text-4); }
#pedro-ai-app #pedro-chat-charcount.is-near-limit { color:#6C5CE7; }
#pedro-ai-app .tq-chat-input-wrapper .pedro-chat-send-btn {
  width:48px; height:48px; border-radius:16px; align-self:flex-end;
  background:var(--text); box-shadow:0 12px 28px rgba(15,23,42,.16);
}
#pedro-ai-app .tq-chat-input-wrapper .pedro-chat-send-btn:hover { background:#6C5CE7; transform:translateY(-1px) scale(1.03); }
#pedro-ai-app .pedro-typing-bubble { border-radius:18px; padding:14px 16px; }
#pedro-ai-app .pedro-chat-message.assistant.rich .pedro-chat-bubble { max-width:min(980px, 94%); }
#pedro-ai-app .pedro-chat-message.assistant.rich .p-doc { border-radius:18px; }
@media (max-width: 860px) {
  #pedro-ai-app .tq-chat-hero { align-items:flex-start; flex-direction:column; }
  #pedro-ai-app .tq-chat-context { grid-template-columns:repeat(2, minmax(120px,1fr)); }
  #pedro-ai-app .pedro-chat-bubble { max-width:94%; }
}
@media (max-width: 560px) {
  #pedro-ai-app .tq-chat-context { grid-template-columns:1fr; }
  #pedro-ai-app .tq-chat-hero h2 { font-size:20px; }
  #pedro-ai-app .tq-chat-input-wrapper { padding:10px; }
}

/* Chat with Teeqo — friendly lounge refresh v6.23.5 */
#pedro-ai-app .tq-chat-lounge{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:18px;
  min-height:100%;
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(248,250,252,.96));
}
#pedro-ai-app .tq-chat-hero-soft{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:20px 22px;
  border:1px solid rgba(226,232,240,.95);
  border-radius:24px;
  background:linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,247,248,.96));
  box-shadow:0 18px 60px rgba(15,23,42,.07);
}
#pedro-ai-app .tq-chat-hero-soft .tq-chat-kicker{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  background:#F1EFFD;
  color:#5546D6;
  font-size:11px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}
#pedro-ai-app .tq-chat-hero-soft h2{
  margin:10px 0 8px;
  font-size:28px;
  line-height:1.1;
  letter-spacing:-.04em;
  color:#0f172a;
}
#pedro-ai-app .tq-chat-hero-soft p{
  margin:0;
  max-width:720px;
  color:var(--text-3);
  font-size:15px;
  line-height:1.6;
}
#pedro-ai-app .tq-chat-hero-actions{display:flex;gap:10px;flex-wrap:wrap;}
#pedro-ai-app .tq-chat-mini-btn{
  border:1px solid var(--border);
  border-radius:999px;
  background:#fff;
  color:var(--text-2);
  font-weight:800;
  padding:10px 14px;
  box-shadow:0 8px 24px rgba(15,23,42,.05);
}
#pedro-ai-app .tq-chat-mini-btn:hover{transform:translateY(-1px);background:#fff7ed;border-color:#fdba74;}
#pedro-ai-app .tq-chat-starters-shell{
  border:1px solid rgba(226,232,240,.92);
  border-radius:22px;
  background:#ffffff;
  padding:16px;
  box-shadow:0 10px 30px rgba(15,23,42,.04);
}
#pedro-ai-app .tq-chat-starters-title{
  margin:0 0 10px;
  color:var(--text-3);
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}
#pedro-ai-app .tq-chat-starter-grid-soft{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
#pedro-ai-app .tq-chat-starter-grid-soft .tq-chat-starter{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  min-height:92px;
  padding:16px;
  border:1px solid var(--border);
  border-radius:18px;
  background:linear-gradient(180deg,#fff,#fafafa);
  text-align:left;
  box-shadow:none;
}
#pedro-ai-app .tq-chat-starter-grid-soft .tq-chat-starter:hover{
  border-color:#D5CEF8;
  background:#fff7f8;
  transform:translateY(-1px);
}
#pedro-ai-app .tq-chat-starter-grid-soft .tq-chat-starter strong{
  color:#0f172a;
  font-size:15px;
}
#pedro-ai-app .tq-chat-starter-grid-soft .tq-chat-starter span{
  color:var(--text-3);
  font-size:13px;
  line-height:1.45;
}
#pedro-ai-app .tq-chat-context-simple{
  border:1px solid var(--border);
  border-radius:18px;
  background:#fff;
  padding:0 14px 14px;
}
#pedro-ai-app .tq-chat-context-simple summary{
  cursor:pointer;
  list-style:none;
  font-weight:800;
  color:var(--text-3);
  padding:14px 0 0;
}
#pedro-ai-app .tq-chat-context-simple summary::-webkit-details-marker{display:none;}
#pedro-ai-app .tq-chat-context-simple[open] summary{margin-bottom:12px;}
#pedro-ai-app .tq-chat-context{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
#pedro-ai-app .tq-chat-context label{
  display:grid;
  gap:6px;
  color:var(--text-3);
  font-size:12px;
  font-weight:800;
}
#pedro-ai-app .tq-chat-context select{
  min-height:42px;
  border-radius:14px;
  border:1px solid #dbe3ee;
  background:var(--bg);
  padding:0 12px;
  color:#0f172a;
  font-weight:700;
}
#pedro-ai-app .tq-chat-container-soft{
  display:flex;
  flex-direction:column;
  min-height:520px;
  border:1px solid rgba(226,232,240,.95);
  border-radius:28px;
  background:linear-gradient(180deg,#fff,#fcfcfd);
  box-shadow:0 24px 70px rgba(15,23,42,.08);
  overflow:hidden;
}
#pedro-ai-app .tq-chat-container-soft .pedro-chat-messages{
  flex:1;
  padding:24px 24px 10px;
  background:radial-gradient(circle at top, rgba(255,247,248,.6), transparent 36%), #fff;
}
#pedro-ai-app .tq-chat-welcome-card-soft .pedro-chat-bubble{
  max-width:760px;
  padding:20px 22px;
  border-radius:22px;
  background:linear-gradient(180deg,#fff8f8,#ffffff);
  border:1px solid #ffe4e6;
}
#pedro-ai-app .tq-chat-input-wrapper-soft{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:18px 20px 20px;
  border-top:1px solid #eef2f7;
  background:#fff;
}
#pedro-ai-app .tq-chat-composer-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
#pedro-ai-app .tq-chat-composer-title{
  color:#0f172a;
  font-size:14px;
  font-weight:900;
}
#pedro-ai-app .tq-chat-input-shell-soft{
  display:flex;
  align-items:flex-end;
  gap:12px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:22px;
  background:var(--bg);
}
#pedro-ai-app .tq-chat-input-wrapper-soft .pedro-chat-input{
  min-height:72px;
  max-height:220px;
  padding:0;
  border:0;
  background:transparent;
  resize:none;
  font-size:15px;
  line-height:1.55;
  box-shadow:none;
}
#pedro-ai-app .tq-chat-input-wrapper-soft .pedro-chat-input:focus{box-shadow:none;outline:none;}
#pedro-ai-app .tq-chat-input-wrapper-soft .pedro-chat-send-btn{
  flex:0 0 auto;
  width:48px;
  height:48px;
  border-radius:16px;
  background:linear-gradient(135deg,var(--text),var(--text-2));
  color:#fff;
  box-shadow:0 12px 28px rgba(15,23,42,.18);
}
#pedro-ai-app .tq-chat-input-wrapper-soft .pedro-chat-send-btn:hover{background:linear-gradient(135deg,#6C5CE7,#8B7CF0);}
#pedro-ai-app .tq-chat-composer-hints{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
#pedro-ai-app .tq-chat-input-hint{
  border:1px solid var(--border);
  border-radius:999px;
  padding:8px 12px;
  background:#fff;
  color:var(--text-3);
  font-size:12px;
  font-weight:800;
}
#pedro-ai-app .tq-chat-input-hint:hover{background:#fff7ed;border-color:#fdba74;color:#9a3412;}
#pedro-ai-app .tq-chat-lounge .pedro-quick-actions,
#pedro-ai-app .tq-chat-lounge .pedro-chat-helper-bar{display:none !important;}
#pedro-ai-app .tq-chat-lounge .pedro-chat-message{gap:14px;}
#pedro-ai-app .tq-chat-lounge .pedro-msg-avatar{
  width:42px;height:42px;border-radius:14px;
  box-shadow:0 10px 20px rgba(15,23,42,.08);
}
#pedro-ai-app .tq-chat-lounge .pedro-chat-bubble{
  border-radius:20px;
  max-width:min(860px,95%);
}
#pedro-ai-app .tq-chat-lounge .pedro-chat-message.user .pedro-chat-bubble{
  background:linear-gradient(135deg,var(--text),var(--text));
}
@media (max-width: 980px){
  #pedro-ai-app .tq-chat-starter-grid-soft,
  #pedro-ai-app .tq-chat-context{grid-template-columns:1fr 1fr;}
}
@media (max-width: 640px){
  #pedro-ai-app .tq-chat-lounge{padding:12px;}
  #pedro-ai-app .tq-chat-hero-soft{padding:16px;flex-direction:column;}
  #pedro-ai-app .tq-chat-starter-grid-soft,
  #pedro-ai-app .tq-chat-context{grid-template-columns:1fr;}
  #pedro-ai-app .tq-chat-container-soft .pedro-chat-messages{padding:18px 16px 8px;}
  #pedro-ai-app .tq-chat-input-wrapper-soft{padding:14px;}
}

/* Chat with Teeqo — classic chat restored, stronger but not noisy v6.23.6 */
#pedro-ai-app .tq-chat-classic-pro{
  height:100%;
  min-height:0;
  overflow:hidden;
  background:var(--bg);
}
#pedro-ai-app .tq-chat-classic-pro .pedro-quick-actions{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 18px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
}
#pedro-ai-app .tq-chat-strip-label{
  font-size:11px;
  font-weight:800;
  color:var(--text-4);
  text-transform:uppercase;
  letter-spacing:.06em;
  align-self:center;
  flex-shrink:0;
  white-space:nowrap;
}
#pedro-ai-app .tq-chat-classic-pro .pedro-quick-action{
  border-radius:999px;
  min-height:34px;
  padding:7px 13px;
  background:#fff;
  border:1px solid var(--border);
  box-shadow:0 6px 16px rgba(15,23,42,.04);
}
#pedro-ai-app .tq-chat-classic-pro .pedro-quick-action:hover{
  background:#F1EFFD;
  border-color:#D5CEF8;
  color:#6C5CE7;
}
#pedro-ai-app .tq-chat-classic-pro .tq-chat-helper-bar{
  flex:0 0 auto;
  display:flex !important;
  align-items:center;
  gap:8px;
  padding:9px 18px;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,250,252,.96));
  border-bottom:1px solid #e5e7eb;
}
#pedro-ai-app .tq-chat-classic-pro .pedro-chat-helper-chip,
#pedro-ai-app .tq-chat-classic-pro .pedro-chat-helper-clear{
  min-height:30px;
  padding:6px 10px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--border);
  color:var(--text-3);
  font-size:11.5px;
  font-weight:900;
}
#pedro-ai-app .tq-chat-classic-pro .pedro-chat-helper-chip:hover,
#pedro-ai-app .tq-chat-classic-pro .pedro-chat-helper-clear:hover{
  background:#fff7ed;
  border-color:#fdba74;
  color:#9a3412;
}
#pedro-ai-app .tq-chat-classic-pro .tq-chat-spacer{flex:1 1 auto;}
#pedro-ai-app .tq-chat-classic-container{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:#fff;
}
#pedro-ai-app .tq-chat-classic-container .pedro-chat-messages{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto !important;
  overflow-x:hidden;
  padding:18px 20px 16px;
  gap:16px;
  background:
    linear-gradient(rgba(255,255,255,.90), rgba(255,255,255,.90)),
    radial-gradient(circle at 20px 20px, rgba(148,163,184,.12) 1px, transparent 1px);
  background-size:auto,24px 24px;
  -webkit-overflow-scrolling:touch;
}
#pedro-ai-app .tq-chat-classic-pro .pedro-chat-message{gap:12px;max-width:100%;}
#pedro-ai-app .tq-chat-classic-pro .pedro-chat-message .pedro-msg-avatar{
  width:38px;
  height:38px;
  font-size:17px;
  box-shadow:0 8px 20px rgba(15,23,42,.08);
}
#pedro-ai-app .tq-chat-classic-pro .pedro-msg-name{
  font-size:10.5px;
  font-weight:900;
  color:var(--text-3);
  margin-bottom:5px;
}
#pedro-ai-app .tq-chat-classic-pro .pedro-chat-bubble{
  max-width:min(900px,92%);
  border-radius:18px;
  padding:14px 16px;
  line-height:1.62;
  font-size:14px;
}
#pedro-ai-app .tq-chat-classic-pro .pedro-chat-message.assistant .pedro-chat-bubble{
  border:1px solid var(--border);
  box-shadow:0 12px 34px rgba(15,23,42,.07);
}
#pedro-ai-app .tq-chat-classic-pro .pedro-chat-message.user .pedro-chat-bubble{
  border-radius:18px 18px 4px 18px;
  background:linear-gradient(135deg,#6C5CE7,#4C3EC8);
}
#pedro-ai-app .tq-chat-classic-pro .pedro-chat-input-wrapper{
  flex:0 0 auto;
  display:flex;
  align-items:flex-end;
  gap:10px;
  padding:12px 18px 14px;
  background:rgba(255,255,255,.98);
  border-top:1px solid #e5e7eb;
  box-shadow:0 -10px 30px rgba(15,23,42,.04);
}
#pedro-ai-app .tq-chat-classic-pro .tq-chat-input-shell{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
  border:1.5px solid var(--border);
  border-radius:18px;
  background:#fff;
  padding:8px;
  transition:box-shadow .18s,border-color .18s;
}
#pedro-ai-app .tq-chat-classic-pro .tq-chat-input-shell:focus-within{
  border-color:#6C5CE7;
  box-shadow:0 0 0 4px rgba(108,92,231,.10);
}
#pedro-ai-app .tq-chat-classic-pro .pedro-chat-input{
  border:0;
  background:transparent;
  padding:6px 8px;
  min-height:38px;
  max-height:160px;
  box-shadow:none !important;
  resize:none;
}
#pedro-ai-app .tq-chat-classic-pro .tq-chat-input-tools{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  padding:0 2px;
}
#pedro-ai-app .tq-chat-classic-pro .tq-chat-input-tool{
  min-height:26px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--bg);
  color:var(--text-3);
  padding:4px 9px;
  font-size:11px;
  font-weight:900;
  cursor:pointer;
}
#pedro-ai-app .tq-chat-classic-pro .tq-chat-input-tool:hover{background:#F1EFFD;color:#6C5CE7;border-color:#D5CEF8;}
#pedro-ai-app .tq-chat-classic-pro #pedro-chat-charcount{margin-left:auto;font-size:10.5px;font-weight:800;color:var(--text-4);}
#pedro-ai-app .tq-chat-classic-pro .pedro-chat-send-btn{
  width:48px;
  height:48px;
  border-radius:16px;
  align-self:flex-end;
  background:var(--text);
  box-shadow:0 12px 28px rgba(15,23,42,.16);
}
#pedro-ai-app .tq-chat-classic-pro .pedro-chat-send-btn:hover{background:#6C5CE7;transform:translateY(-1px) scale(1.03);}
#pedro-ai-app .tq-chat-classic-pro .tq-chat-actions-pro{gap:7px;max-width:880px;}
#pedro-ai-app .tq-chat-classic-pro .pedro-chat-action-btn{border-radius:12px;min-height:32px;padding:6px 10px;background:#fff;color:var(--text-3);font-size:11.5px;font-weight:900;}
#pedro-ai-app .tq-chat-classic-pro .pedro-chat-action-btn.is-primary{background:var(--text);border-color:var(--text);color:#fff;}
@media (max-width: 760px){
  #pedro-ai-app .tq-chat-classic-pro .pedro-quick-actions,
  #pedro-ai-app .tq-chat-classic-pro .tq-chat-helper-bar{padding:10px 12px;overflow-x:auto;flex-wrap:nowrap;}
  #pedro-ai-app .tq-chat-classic-pro .pedro-chat-helper-label{display:none;}
  #pedro-ai-app .tq-chat-classic-pro .tq-chat-spacer{display:none;}
  #pedro-ai-app .tq-chat-classic-container .pedro-chat-messages{padding:14px 14px 10px;}
  #pedro-ai-app .tq-chat-classic-pro .pedro-chat-input-wrapper{padding:10px 12px;}
}


/* v6.23.7 — Chat original usable + scroll fix + library inline delete confirmation */
#pedro-ai-app .tq-chat-original-plus{
  height: calc(100dvh - 96px);
  max-height: calc(100dvh - 96px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}
#pedro-ai-app .tq-chat-original-plus .pedro-quick-actions{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}
#pedro-ai-app .tq-chat-original-plus .tq-chat-strip-label{
  flex: 0 0 auto;
  color: var(--text-4);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
#pedro-ai-app .tq-chat-original-plus .pedro-quick-action{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 6px 18px rgba(15,23,42,.04);
  cursor: pointer;
}
#pedro-ai-app .tq-chat-original-plus .pedro-quick-action:hover{
  transform: translateY(-1px);
  border-color: rgba(108,92,231,.25);
  background: #fff7f8;
}
#pedro-ai-app .tq-chat-original-plus .pedro-quick-action-icon{font-size:16px;}
#pedro-ai-app .tq-chat-original-plus .tq-chat-spacer{flex:1 1 auto;}
#pedro-ai-app .tq-chat-original-plus .tq-chat-mini-btn{
  flex:0 0 auto;
  min-height: 38px;
  border:1px solid var(--border);
  border-radius:999px;
  padding:8px 14px;
  background:#fff;
  color:var(--text-2);
  font-weight:900;
  cursor:pointer;
}
#pedro-ai-app .tq-chat-original-plus .tq-chat-mini-btn:hover{background:var(--bg);color:var(--text);}
#pedro-ai-app .tq-chat-original-container{
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
}
#pedro-ai-app .tq-chat-original-container .pedro-chat-messages{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto !important;
  overflow-x: hidden;
  padding: 20px 24px 18px;
  scroll-behavior: smooth;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,1));
}
#pedro-ai-app .tq-chat-original-plus .pedro-chat-message{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0 0 18px;
}
#pedro-ai-app .tq-chat-original-plus .pedro-msg-avatar{
  flex:0 0 auto;
  width:42px;
  height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#F1EFFD;
  border:1px solid #D5CEF8;
  box-shadow:0 8px 22px rgba(108,92,231,.08);
}
#pedro-ai-app .tq-chat-original-plus .pedro-msg-content{max-width:min(900px, calc(100% - 60px));}
#pedro-ai-app .tq-chat-original-plus .pedro-msg-name{
  margin:0 0 7px;
  color:var(--text-3);
  font-size:11.5px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
}
#pedro-ai-app .tq-chat-original-plus .pedro-chat-bubble{
  border:1px solid var(--border);
  border-radius:18px;
  background:#fff;
  padding:16px 18px;
  color:var(--text);
  line-height:1.58;
  box-shadow:0 14px 34px rgba(15,23,42,.05);
}
#pedro-ai-app .tq-chat-original-plus .pedro-chat-message.user{
  justify-content:flex-end;
}
#pedro-ai-app .tq-chat-original-plus .pedro-chat-message.user .pedro-msg-avatar,
#pedro-ai-app .tq-chat-original-plus .pedro-chat-message.user .pedro-msg-name{display:none;}
#pedro-ai-app .tq-chat-original-plus .pedro-chat-message.user .pedro-msg-content{max-width:min(760px, 86%);}
#pedro-ai-app .tq-chat-original-plus .pedro-chat-message.user .pedro-chat-bubble{
  background:var(--text);
  color:#fff;
  border-color:var(--text);
}
#pedro-ai-app .tq-chat-input-original{
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 14px 18px 16px;
  border-top: 1px solid var(--border);
  background: #fff;
  box-shadow: 0 -10px 30px rgba(15,23,42,.04);
}
#pedro-ai-app .tq-chat-input-original .tq-chat-input-box{
  flex:1 1 auto;
  min-width:0;
  border:1px solid var(--border);
  border-radius:18px;
  background:#fff;
  padding:12px 14px 9px;
}
#pedro-ai-app .tq-chat-input-original .pedro-chat-input{
  width:100%;
  min-height:28px;
  max-height:130px;
  border:0;
  background:transparent;
  padding:0;
  resize:none;
  outline:none;
  box-shadow:none;
  color:var(--text);
  font-size:14.5px;
  line-height:1.45;
}
#pedro-ai-app .tq-chat-input-original .pedro-chat-input:focus{outline:none;box-shadow:none;}
#pedro-ai-app .tq-chat-input-original .tq-chat-input-tools{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  margin-top:8px;
}
#pedro-ai-app .tq-chat-input-original .tq-chat-input-tool{
  border:1px solid var(--border);
  border-radius:999px;
  padding:5px 10px;
  background:var(--bg);
  color:var(--text-3);
  font-size:11px;
  font-weight:900;
  cursor:pointer;
}
#pedro-ai-app .tq-chat-input-original .tq-chat-input-tool:hover{background:#F1EFFD;color:#6C5CE7;border-color:#D5CEF8;}
#pedro-ai-app .tq-chat-input-original #pedro-chat-charcount{margin-left:auto;font-size:10.5px;font-weight:800;color:var(--text-4);}
#pedro-ai-app .tq-chat-input-original .pedro-chat-send-btn{
  flex:0 0 auto;
  width:52px;
  height:52px;
  border-radius:18px;
  background:var(--text);
  color:#fff;
  display:grid;
  place-items:center;
  box-shadow:0 12px 28px rgba(15,23,42,.16);
}
#pedro-ai-app .tq-chat-input-original .pedro-chat-send-btn:hover{background:#6C5CE7;transform:translateY(-1px);}
#pedro-ai-app .tq-chat-original-plus .pedro-chat-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px;}
#pedro-ai-app .tq-chat-original-plus .pedro-chat-action-btn{
  border:1px solid var(--border);
  border-radius:999px;
  padding:6px 10px;
  background:#fff;
  color:var(--text-3);
  font-size:11.5px;
  font-weight:900;
  cursor:pointer;
}
#pedro-ai-app .tq-chat-original-plus .pedro-chat-action-btn.is-primary{background:var(--text);border-color:var(--text);color:#fff;}
#pedro-ai-app .p-lib-delete.is-confirming,
#pedro-ai-app .p-lib-delete.is-confirming:hover{
  background:#991b1b !important;
  color:#fff !important;
  border-color:#991b1b !important;
  box-shadow:0 10px 26px rgba(153,27,27,.22);
}
#pedro-ai-app .pedro-confirm-overlay{display:none !important;}
@media (max-width: 760px){
  #pedro-ai-app .tq-chat-original-plus{height:calc(100dvh - 70px);max-height:calc(100dvh - 70px);}
  #pedro-ai-app .tq-chat-original-plus .pedro-quick-actions{padding:10px 12px;}
  #pedro-ai-app .tq-chat-original-container .pedro-chat-messages{padding:14px 14px 10px;}
  #pedro-ai-app .tq-chat-input-original{padding:10px 12px 12px;}
  #pedro-ai-app .tq-chat-input-original .tq-chat-input-tools{display:none;}
}


/* v6.23.8 — Chat avatar + natural classic polish */
#pedro-ai-app .tq-chat-natural .pedro-chat-container,
#pedro-ai-app .tq-chat-natural .tq-chat-container-classic{
  min-height:0;
  height:calc(100vh - 250px);
  max-height:780px;
  display:flex;
  flex-direction:column;
}
#pedro-ai-app .tq-chat-natural .pedro-chat-messages{
  min-height:0;
  flex:1 1 auto;
  overflow-y:auto;
  padding-bottom:18px;
}
#pedro-ai-app .tq-chat-natural .pedro-chat-input-wrapper{
  flex:0 0 auto;
  position:relative;
  z-index:2;
}
#pedro-ai-app .tq-chat-natural .pedro-msg-avatar.tq-user-avatar{
  overflow:hidden;
  background:linear-gradient(135deg,#eff6ff,#dbeafe);
  border:1.5px solid rgba(37,99,235,.22);
  color:#1d4ed8;
  font-weight:900;
}
#pedro-ai-app .tq-chat-natural .pedro-msg-avatar.tq-user-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
#pedro-ai-app .tq-chat-natural .pedro-msg-avatar.tq-user-avatar span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  font-size:12px;
}
#pedro-ai-app .tq-chat-natural .tq-chat-toolbar-row{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  padding:10px 18px;
  border-bottom:1px solid #e5e7eb;
  background:#fff;
}
#pedro-ai-app .tq-chat-natural .tq-chat-toolbar-row .tq-chat-strip-label{
  margin-right:auto;
}
#pedro-ai-app .tq-chat-natural .tq-chat-tool{
  border:1px solid #dfe7f2;
  border-radius:999px;
  background:#fff;
  color:var(--text-3);
  padding:8px 13px;
  font-weight:800;
  box-shadow:0 8px 18px rgba(15,23,42,.04);
}
#pedro-ai-app .tq-chat-natural .tq-chat-tool:hover{
  border-color:#D5CEF8;
  background:#F7F6FE;
  color:#4C3EC8;
}
#pedro-ai-app .tq-chat-natural .pedro-quick-actions{
  flex:0 0 auto;
}
#pedro-ai-app .tq-chat-natural .tq-chat-input-tools{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
#pedro-ai-app .tq-chat-natural .tq-chat-input-tool{
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--bg);
  color:var(--text-3);
  padding:6px 10px;
  font-size:12px;
  font-weight:800;
}
#pedro-ai-app .tq-chat-natural .tq-chat-input-tool:hover{
  background:#fff7ed;
  border-color:#fdba74;
  color:#9a3412;
}
@media (max-height: 800px){
  #pedro-ai-app .tq-chat-natural .pedro-chat-container,
  #pedro-ai-app .tq-chat-natural .tq-chat-container-classic{
    height:calc(100vh - 205px);
  }
  #pedro-ai-app .tq-chat-natural .pedro-quick-actions{
    padding-top:8px;
    padding-bottom:8px;
  }
}

/* v6.23.9 — restore visible user avatar and keep chat conversational */
#pedro-ai-app .tq-chat-natural .pedro-chat-message.user .pedro-msg-avatar,
#pedro-ai-app .tq-chat-original-plus .pedro-chat-message.user .pedro-msg-avatar{
  display:flex !important;
  align-items:center;
  justify-content:center;
  flex:0 0 42px;
  width:42px;
  height:42px;
}
#pedro-ai-app .tq-chat-natural .pedro-chat-message.user .pedro-msg-name,
#pedro-ai-app .tq-chat-original-plus .pedro-chat-message.user .pedro-msg-name{
  display:block !important;
}
#pedro-ai-app .tq-chat-natural .pedro-msg-avatar.tq-user-avatar.has-image span,
#pedro-ai-app .tq-chat-original-plus .pedro-msg-avatar.tq-user-avatar.has-image span{
  display:none;
}
#pedro-ai-app .tq-chat-natural .pedro-msg-avatar.tq-user-avatar:not(.has-image) span,
#pedro-ai-app .tq-chat-original-plus .pedro-msg-avatar.tq-user-avatar:not(.has-image) span{
  display:inline-flex;
}
#pedro-ai-app .tq-chat-natural .pedro-msg-avatar.tq-user-avatar img,
#pedro-ai-app .tq-chat-original-plus .pedro-msg-avatar.tq-user-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:inherit;
}
#pedro-ai-app .tq-chat-natural .pedro-chat-message.user,
#pedro-ai-app .tq-chat-original-plus .pedro-chat-message.user{
  gap:12px;
}
#pedro-ai-app .tq-chat-natural .pedro-chat-message.user .pedro-msg-content,
#pedro-ai-app .tq-chat-original-plus .pedro-chat-message.user .pedro-msg-content{
  max-width:min(760px, calc(100% - 60px));
}


/* Chat v6.24.0 — rebuilt from scratch: original feel, natural assistant, mobile stable */
#pedro-ai-app .tq-chat-reborn{
  height: calc(100vh - 150px);
  min-height: 560px;
  max-height: calc(100vh - 150px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:26px;
  background:#fff;
  box-shadow:0 22px 70px rgba(15,23,42,.08);
}
#pedro-ai-app .tq-chat-topbar{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 18px;
  border-bottom:1px solid #e5e7eb;
  background:linear-gradient(180deg,#fff,#fbfdff);
}
#pedro-ai-app .tq-chat-topbar-left,
#pedro-ai-app .tq-chat-topbar-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
#pedro-ai-app .tq-chat-strip-label{
  color:#98a2b3;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:12px;
}
#pedro-ai-app .tq-chat-top-action,
#pedro-ai-app .tq-chat-mini-btn{
  border:1px solid #dbe3ee;
  background:#fff;
  color:var(--text-2);
  border-radius:999px;
  padding:9px 14px;
  font-weight:900;
  font-size:13px;
  box-shadow:0 6px 16px rgba(15,23,42,.04);
  cursor:pointer;
}
#pedro-ai-app .tq-chat-top-action:hover,
#pedro-ai-app .tq-chat-mini-btn:hover{
  border-color:#D5CEF8;
  background:#F7F6FE;
  color:#5546D6;
}
#pedro-ai-app .tq-chat-reborn-container{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:#fff;
}
#pedro-ai-app .tq-chat-reborn-container .pedro-chat-messages{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto !important;
  overflow-x:hidden;
  padding:22px 24px;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
}
#pedro-ai-app .tq-chat-reborn .pedro-chat-message,
#pedro-ai-app .tq-chat-reborn .pedro-typing{
  display:flex !important;
  align-items:flex-start;
  gap:12px;
  width:100%;
  margin:0 0 18px;
}
#pedro-ai-app .tq-chat-reborn .pedro-chat-message.user{
  justify-content:flex-start !important;
  flex-direction:row !important;
}
#pedro-ai-app .tq-chat-reborn .pedro-msg-avatar{
  flex:0 0 42px !important;
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:999px !important;
  overflow:hidden !important;
  visibility:visible !important;
  opacity:1 !important;
  background:#F1EFFD;
  border:1px solid #D5CEF8;
  box-shadow:0 8px 20px rgba(15,23,42,.08);
  font-weight:900;
  color:#5546D6;
}
#pedro-ai-app .tq-chat-reborn .pedro-msg-avatar.tq-user-avatar{
  background:#e0f2fe !important;
  border-color:#bae6fd !important;
  color:#0369a1 !important;
}
#pedro-ai-app .tq-chat-reborn .pedro-msg-avatar.tq-user-avatar img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
  border-radius:inherit !important;
}
#pedro-ai-app .tq-chat-reborn .pedro-msg-avatar.tq-user-avatar span{display:none;}
#pedro-ai-app .tq-chat-reborn .pedro-msg-avatar.tq-user-avatar.is-fallback span{display:flex;}
#pedro-ai-app .tq-chat-reborn .pedro-msg-content{
  min-width:0;
  max-width:min(860px, calc(100% - 58px));
}
#pedro-ai-app .tq-chat-reborn .pedro-chat-message.user .pedro-msg-content{
  max-width:min(760px, calc(100% - 58px));
}
#pedro-ai-app .tq-chat-reborn .pedro-msg-name{
  color:var(--text-3);
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  margin:0 0 7px;
}
#pedro-ai-app .tq-chat-reborn .pedro-chat-bubble{
  border:1px solid #dbe3ee;
  background:#fff;
  color:var(--text);
  border-radius:20px;
  padding:16px 18px;
  line-height:1.6;
  font-size:15px;
  box-shadow:0 12px 34px rgba(15,23,42,.05);
}
#pedro-ai-app .tq-chat-reborn .pedro-chat-message.user .pedro-chat-bubble{
  background:linear-gradient(135deg,var(--text),#263244);
  border-color:var(--text);
  color:#fff;
}
#pedro-ai-app .tq-chat-reborn-input{
  flex:0 0 auto;
  display:flex;
  align-items:flex-end;
  gap:12px;
  padding:16px 18px 10px;
  border-top:1px solid #e5e7eb;
  background:#fff;
}
#pedro-ai-app .tq-chat-reborn-input .pedro-chat-input{
  flex:1 1 auto;
  width:100%;
  min-height:56px;
  max-height:180px;
  padding:16px 18px;
  border:1px solid #dbe3ee;
  border-radius:18px;
  background:#fff;
  resize:none;
  overflow-y:auto;
  font-size:16px !important;
  line-height:1.45;
  color:var(--text);
  outline:none;
  box-shadow:0 8px 24px rgba(15,23,42,.04);
}
#pedro-ai-app .tq-chat-reborn-input .pedro-chat-input:focus{
  border-color:#fda4af;
  box-shadow:0 0 0 4px rgba(244,63,94,.10);
}
#pedro-ai-app .tq-chat-reborn-input .pedro-chat-send-btn{
  flex:0 0 56px;
  width:56px;
  height:56px;
  border:0;
  border-radius:18px;
  background:var(--text);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 12px 28px rgba(15,23,42,.18);
}
#pedro-ai-app .tq-chat-reborn-input .pedro-chat-send-btn:hover{background:#6C5CE7;}
#pedro-ai-app .tq-chat-input-note{
  flex:0 0 auto;
  padding:0 22px 14px;
  color:#98a2b3;
  font-size:12px;
  font-weight:700;
  background:#fff;
}
#pedro-ai-app .tq-chat-response-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}
#pedro-ai-app .tq-chat-response-actions .pedro-chat-action-btn{
  border:1px solid #dbe3ee;
  background:#fff;
  color:var(--text-3);
  border-radius:999px;
  padding:7px 11px;
  font-size:12px;
  font-weight:900;
}
#pedro-ai-app .tq-chat-response-actions .pedro-chat-action-btn:hover{
  background:var(--bg);
  color:var(--text);
}
#pedro-ai-app .tq-chat-reborn .pedro-typing-bubble{
  display:flex;
  align-items:center;
  gap:5px;
  width:max-content;
  padding:13px 15px;
  border:1px solid #dbe3ee;
  border-radius:18px;
  background:#fff;
}
#pedro-ai-app .tq-chat-reborn .pedro-typing-dot{
  width:7px;height:7px;border-radius:50%;background:var(--text-4);animation:pedroTyping 1s infinite ease-in-out;
}
#pedro-ai-app .tq-chat-reborn .pedro-typing-dot:nth-child(2){animation-delay:.12s;}
#pedro-ai-app .tq-chat-reborn .pedro-typing-dot:nth-child(3){animation-delay:.24s;}
@keyframes pedroTyping{0%,80%,100%{transform:translateY(0);opacity:.45}40%{transform:translateY(-4px);opacity:1}}
#pedro-ai-app .tq-chat-reborn .pedro-chat-helper-bar,
#pedro-ai-app .tq-chat-reborn .tq-chat-composer-hints,
#pedro-ai-app .tq-chat-reborn .tq-chat-input-hint,
#pedro-ai-app .tq-chat-reborn .pedro-chat-helper-chip{
  display:none !important;
}
@media (max-width: 900px){
  #pedro-ai-app .tq-chat-reborn{
    height: calc(100dvh - 86px);
    max-height: calc(100dvh - 86px);
    min-height:0;
    border-radius:0;
    border-left:0;
    border-right:0;
  }
  #pedro-ai-app .tq-chat-topbar{
    padding:10px 12px;
    overflow-x:auto;
    align-items:flex-start;
    -webkit-overflow-scrolling:touch;
  }
  #pedro-ai-app .tq-chat-topbar-left{
    flex-wrap:nowrap;
    min-width:max-content;
  }
  #pedro-ai-app .tq-chat-topbar-right{
    flex-wrap:nowrap;
    min-width:max-content;
  }
  #pedro-ai-app .tq-chat-strip-label{display:none;}
  #pedro-ai-app .tq-chat-top-action,
  #pedro-ai-app .tq-chat-mini-btn{
    padding:8px 11px;
    font-size:12px;
    white-space:nowrap;
  }
  #pedro-ai-app .tq-chat-reborn-container .pedro-chat-messages{
    padding:16px 14px;
  }
  #pedro-ai-app .tq-chat-reborn .pedro-msg-avatar{
    flex-basis:36px !important;
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
  }
  #pedro-ai-app .tq-chat-reborn .pedro-msg-content,
  #pedro-ai-app .tq-chat-reborn .pedro-chat-message.user .pedro-msg-content{
    max-width:calc(100% - 48px);
  }
  #pedro-ai-app .tq-chat-reborn .pedro-chat-bubble{
    padding:13px 14px;
    font-size:15px;
  }
  #pedro-ai-app .tq-chat-reborn-input{
    padding:10px 12px 8px;
    gap:8px;
  }
  #pedro-ai-app .tq-chat-reborn-input .pedro-chat-input{
    min-height:50px;
    padding:13px 14px;
    border-radius:16px;
    font-size:16px !important;
  }
  #pedro-ai-app .tq-chat-reborn-input .pedro-chat-send-btn{
    flex-basis:50px;
    width:50px;
    height:50px;
    border-radius:16px;
  }
  #pedro-ai-app .tq-chat-input-note{
    padding:0 14px calc(10px + env(safe-area-inset-bottom));
    font-size:11px;
  }
}
@media (max-width: 520px){
  #pedro-ai-app .tq-chat-reborn{
    height: calc(100dvh - 70px);
    max-height: calc(100dvh - 70px);
  }
  #pedro-ai-app .tq-chat-topbar-right{display:none;}
  #pedro-ai-app .tq-chat-reborn .pedro-chat-message,
  #pedro-ai-app .tq-chat-reborn .pedro-typing{
    gap:9px;
    margin-bottom:14px;
  }
}

/* Chat v6.24.1 — worksheet trigger, cleaner mobile input, no duplicate user label */
#pedro-ai-app .tq-chat-reborn .pedro-chat-message.user{
  flex-direction:row-reverse !important;
  justify-content:flex-start !important;
}
#pedro-ai-app .tq-chat-reborn .pedro-chat-message.user .pedro-msg-content{
  align-items:flex-end !important;
  display:flex !important;
  flex-direction:column !important;
}
#pedro-ai-app .tq-chat-reborn .pedro-chat-message.user .pedro-msg-name{
  display:none !important;
}
#pedro-ai-app .tq-chat-input-note{display:none !important;}
#pedro-ai-app .tq-chat-reborn-input{padding-bottom:16px;}
#pedro-ai-app .tq-worksheet-chat-bubble{
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible;
}
#pedro-ai-app .tq-chat-resource-message .pedro-msg-content{
  max-width:min(980px, calc(100% - 58px));
}
#pedro-ai-app .tq-chat-resource-footer{
  margin-top:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border:1px solid #e4e0fc;
  border-radius:22px;
  padding:14px 16px;
  background:linear-gradient(135deg,#f6f5ff,#ffffff);
  box-shadow:0 12px 28px rgba(94,84,220,.10);
}
#pedro-ai-app .tq-chat-resource-footer-copy{display:flex;flex-direction:column;gap:5px;min-width:0;}
#pedro-ai-app .tq-chat-resource-footer-copy strong{font-size:14px;color:var(--text);}
#pedro-ai-app .tq-chat-resource-footer-copy span{font-size:12.5px;line-height:1.45;color:#667085;max-width:62ch;}
#pedro-ai-app .tq-chat-resource-footer-copy small{font-size:11px;color:#98a2b3;word-break:break-all;}
#pedro-ai-app .tq-chat-resource-qr{width:92px;height:92px;flex:0 0 92px;border-radius:18px;border:1px solid #f1d6d6;background:#fff;padding:7px;display:grid;place-items:center;}
#pedro-ai-app .tq-chat-resource-qr img{width:78px;height:78px;display:block;border-radius:10px;}
@media (max-width: 900px){
  #pedro-ai-app .tq-chat-reborn-input{padding-bottom:calc(12px + env(safe-area-inset-bottom));}
  #pedro-ai-app .tq-chat-reborn-input .pedro-chat-input{font-size:16px !important;min-height:48px;}
  #pedro-ai-app .tq-chat-resource-footer{align-items:flex-start;}
}
@media (max-width: 520px){
  #pedro-ai-app .tq-chat-resource-footer{flex-direction:row;padding:12px;gap:10px;border-radius:18px;}
  #pedro-ai-app .tq-chat-resource-footer-copy strong{font-size:13px;}
  #pedro-ai-app .tq-chat-resource-footer-copy span{font-size:11.5px;}
  #pedro-ai-app .tq-chat-resource-qr{width:74px;height:74px;flex-basis:74px;border-radius:14px;padding:6px;}
  #pedro-ai-app .tq-chat-resource-qr img{width:62px;height:62px;}
}

/* v6.24.2 — premium worksheet output + mobile whiteboard polish */
.tq-worksheet-chat-bubble{
  max-width:min(920px,100%);
  padding:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.tq-worksheet-doc{
  border-radius:28px!important;
  border:1px solid color-mix(in srgb, var(--red) 18%, var(--border))!important;
  box-shadow:0 24px 60px rgba(94,84,220,.12)!important;
  overflow:hidden;
}
.tq-worksheet-doc .p-doc-header{
  align-items:flex-start;
  background:radial-gradient(circle at top left, rgba(108,92,231,.18), transparent 34%), linear-gradient(135deg,#fff1ee 0%,#fff 72%)!important;
  padding:22px 24px!important;
}
.tq-worksheet-doc .p-doc-title{
  font-size:22px!important;
  line-height:1.05!important;
  letter-spacing:-.045em!important;
}
.tq-worksheet-doc .p-doc-sub{
  font-size:12px!important;
  color:var(--text-3)!important;
}
.tq-worksheet-doc .p-doc-body{
  gap:12px!important;
  padding:22px 24px 24px!important;
}
.tq-worksheet-name-row{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr;
  gap:10px;
  margin:0 0 12px;
  padding:12px;
  border:1px dashed color-mix(in srgb, var(--red) 26%, var(--border));
  border-radius:18px;
  background:linear-gradient(135deg,#fff,#fff8f6);
  font-size:12.5px;
  color:var(--text-2);
}
.tq-worksheet-name-row strong{color:var(--text);font-weight:900;}
.tq-worksheet-doc .p-section{
  border-radius:20px!important;
  margin-bottom:12px!important;
  box-shadow:0 10px 28px rgba(15,23,42,.045);
}
.tq-worksheet-doc .p-section-head{
  padding:13px 16px!important;
}
.tq-worksheet-doc .p-section-head-text{
  font-size:13px!important;
  letter-spacing:.01em!important;
  text-transform:none!important;
}
.tq-worksheet-doc .p-section-body{
  padding:16px 18px!important;
}
.tq-worksheet-doc .p-section-body li,
.tq-worksheet-doc .p-section-body p{
  font-size:14px!important;
  line-height:1.72!important;
}
.tq-worksheet-doc table{
  overflow:hidden;
  border-radius:14px;
}
.tq-worksheet-qr-strip{
  display:grid;
  grid-template-columns:minmax(0,1fr) 96px;
  align-items:center;
  gap:16px;
  margin-top:12px;
  padding:16px;
  border-radius:22px;
  background:linear-gradient(135deg,var(--text) 0%,#7f1d1d 100%);
  color:#fff;
  break-inside:avoid;
}
.tq-worksheet-qr-copy{display:flex;flex-direction:column;gap:5px;min-width:0;}
.tq-worksheet-qr-copy strong{font-size:14px;font-weight:900;color:#fff;}
.tq-worksheet-qr-copy span{font-size:12px;line-height:1.45;color:rgba(255,255,255,.84);}
.tq-worksheet-qr-copy small{font-size:10.5px;color:rgba(255,255,255,.62);word-break:break-all;}
.tq-worksheet-qr-card{
  width:96px;height:96px;border-radius:18px;background:#fff;padding:8px;
  display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px rgba(0,0,0,.18);
}
.tq-worksheet-qr-card img{width:80px;height:80px;display:block;}
@media (max-width:760px){
  .tq-worksheet-name-row{grid-template-columns:1fr;}
  .tq-worksheet-qr-strip{grid-template-columns:1fr;justify-items:start;}
  .tq-worksheet-doc .p-doc-header{padding:18px!important;}
  .tq-worksheet-doc .p-doc-body{padding:18px!important;}
  #tq-wb-fullscreen,#pedro-fullscreen,#pedro-fullscreen-btn,.tq-wb-fullscreen,[data-i18n-title="wb_fullscreen_title"]{display:none!important;}
}
@media (max-width:760px){
  html.pedro-ai-ios-device #pedro-ai-app #pedro-fullscreen-btn,
  body.pedro-ai-ios-device #pedro-ai-app #pedro-fullscreen-btn,
  #pedro-ai-app.pedro-ai-ios-capable #pedro-fullscreen-btn,
  #pedro-ai-app.pedro-ai-ios-capable #pedro-fullscreen-btn.pedro-desktop-only{
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
}


/* Teeqo worksheet render hardening v6.24.4 */
.tq-worksheet-doc {
  background: linear-gradient(180deg, #fffdfb 0%, #ffffff 100%);
}
.tq-worksheet-doc .p-section {
  break-inside: avoid;
  page-break-inside: avoid;
}
.tq-answer-line {
  display: inline-block;
  vertical-align: middle;
  border-bottom: 2px solid #d1d5db;
  min-height: 1.05em;
  margin: 0 4px;
  width: 88px;
}
.tq-answer-line.is-medium { width: 132px; }
.tq-answer-line.is-long { width: 188px; }
.tq-emoji-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 6px;
  border-radius: 999px;
  background: #fff7ed;
  font-size: 14px;
  box-shadow: inset 0 0 0 1px rgba(251, 146, 60, .18);
}
.tq-worksheet-stamp {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  font-weight: 800;
}
@media (max-width: 760px) {
  .pedro-fullscreen-btn,
  [data-action="fullscreen"],
  .tq-fullscreen-btn {
    display: none !important;
  }
  #pedro-chat-input {
    font-size: 16px !important;
  }
}


/* v6.24.6 — perfect visual worksheets in chat and print */
.tq-worksheet-chat-bubble {
  width: min(100%, 880px);
  max-width: 880px;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.tq-perfect-worksheet {
  overflow: hidden;
  border: 1px solid #E4E0F7 !important;
  background: #FDFDFF !important;
  border-radius: 26px !important;
  box-shadow: 0 18px 55px rgba(15,23,42,.10) !important;
}
/* v6.56.0 — Modo edición de fichas generadas */
.tq-perfect-worksheet.tq-ws-editing {
  outline: 2px dashed var(--red, #6C5CE7);
  outline-offset: 4px;
}
.tq-perfect-worksheet.tq-ws-editing [contenteditable="true"] {
  cursor: text;
}
.tq-perfect-worksheet.tq-ws-editing [contenteditable="true"]:hover {
  background: rgba(108,92,231,.05);
}
.tq-perfect-worksheet.tq-ws-editing [contenteditable="true"]:focus {
  outline: 2px solid rgba(108,92,231,.45);
  outline-offset: 2px;
  border-radius: 6px;
  background: rgba(108,92,231,.04);
}
.tq-perfect-worksheet-header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  background: linear-gradient(135deg,#fff1ee 0%,#fff 78%) !important;
  border-bottom: 1px solid #f1e5dd;
}
.tq-perfect-worksheet-header h2 {
  font-size: clamp(26px, 4vw, 44px);
  line-height: .95;
  letter-spacing: -.055em;
  margin: 4px 0 8px;
}
.tq-perfect-worksheet-header p {
  margin: 0;
  max-width: 56ch;
  color: var(--text-3);
  font-size: 14px;
  line-height: 1.5;
}
.tq-worksheet-mark {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 22px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #f3ded6, 0 12px 30px rgba(108,92,231,.10);
  font-size: 30px;
}
.tq-visual-section {
  border: 1px solid #eef2f7 !important;
  background: #fff !important;
  margin: 14px 0 !important;
  break-inside: avoid;
  page-break-inside: avoid;
}
.tq-visual-section .p-section-head {
  background: linear-gradient(90deg,#fff7ed,#ffffff);
  border-bottom: 1px solid var(--surface-2);
}
.tq-visual-section .p-section-body {
  font-size: 15px;
  line-height: 1.68;
}
.tq-visual-section .p-section-body p {
  margin: 0 0 10px;
}
.tq-visual-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: grid;
  gap: 8px;
}
.tq-visual-list li {
  padding: 10px 12px;
  border: 1px solid #eef2f7;
  border-radius: 14px;
  background: #fbfdff;
}
.tq-visual-table-wrap {
  overflow-x: auto;
  margin: 10px 0 4px;
}
.tq-visual-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}
.tq-visual-table th {
  background: #fff7ed;
  color: var(--text);
  font-weight: 900;
  font-size: 13px;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid #fed7aa;
}
.tq-visual-table td {
  padding: 10px 12px;
  border-top: 1px solid var(--surface-2);
  font-size: 13px;
  vertical-align: top;
}
.tq-answer-line {
  display: inline-block;
  vertical-align: middle;
  border-bottom: 2px solid #cbd5e1;
  min-height: 1.05em;
  margin: 0 4px;
  width: 88px;
}
.tq-answer-line.is-medium { width: 132px; }
.tq-answer-line.is-long { width: 188px; }
.tq-emoji-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 6px;
  border-radius: 999px;
  background: #fff7ed;
  font-size: 14px;
  box-shadow: inset 0 0 0 1px rgba(251,146,60,.18);
}
@media (max-width: 760px) {
  .tq-perfect-worksheet {
    border-radius: 20px !important;
  }
  .tq-perfect-worksheet .p-doc-header,
  .tq-perfect-worksheet .p-doc-body {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .tq-perfect-worksheet-header {
    align-items: flex-start;
  }
  .tq-worksheet-mark {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    font-size: 24px;
  }
  .tq-perfect-worksheet-header h2 {
    font-size: 28px;
  }
  .tq-visual-table th,
  .tq-visual-table td {
    padding: 9px 10px;
    font-size: 12.5px;
  }
  .tq-worksheet-qr-strip {
    grid-template-columns: 1fr !important;
    text-align: left;
  }
}
@media print {
  .tq-perfect-worksheet {
    box-shadow: none !important;
    border-color: #e5e7eb !important;
  }
  .tq-visual-section,
  .tq-worksheet-name-row,
  .tq-worksheet-qr-strip {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .tq-answer-line {
    border-bottom-color: #9ca3af;
  }
}

/* ===========================================================
   v6.25.0 — Premium editorial header + integrated print button
   for chat worksheets, board snapshot frame, unified print doc
   =========================================================== */
.tq-perfect-worksheet-header {
  align-items: flex-start !important;
  padding: 24px 26px !important;
}
.tq-perfect-worksheet-headline {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tq-perfect-worksheet-kicker {
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 10.5px;
  font-weight: 900;
  color: #6C5CE7;
  margin: 0;
}
.tq-perfect-worksheet-title {
  font-family: "Playfair Display", "Times New Roman", Georgia, serif;
  font-size: clamp(28px, 4.4vw, 44px) !important;
  line-height: .96 !important;
  letter-spacing: -.045em !important;
  font-weight: 800 !important;
  color: var(--text);
  margin: 2px 0 6px !important;
}
.tq-perfect-worksheet-lead {
  margin: 0 0 8px !important;
  max-width: 60ch;
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.5;
}
.tq-perfect-worksheet-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11.5px;
  color: var(--text-3);
  font-weight: 700;
  margin-top: 4px;
}
.tq-perfect-worksheet-meta span {
  padding: 5px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #fff;
}
.tq-perfect-worksheet-meta .tq-perfect-worksheet-brand {
  background: var(--text);
  color: #fff;
  border-color: var(--text);
}
.tq-perfect-worksheet-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 24px 0;
  border-bottom: 1px dashed #f1e5dd;
  margin: 0 0 -2px;
}
.tq-perfect-worksheet-btn {
  appearance: none;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: var(--text);
  font-weight: 800;
  font-size: 12.5px;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s ease;
  font-family: inherit;
}
.tq-perfect-worksheet-btn:hover {
  border-color: #6C5CE7;
  color: #6C5CE7;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(108,92,231,.12);
}
.tq-worksheet-print-btn {
  background: var(--text);
  color: #fff;
  border-color: var(--text);
}
.tq-worksheet-print-btn:hover {
  background: #6C5CE7;
  color: #fff;
  border-color: #6C5CE7;
}
@media (max-width: 760px) {
  .tq-perfect-worksheet-header {
    flex-direction: column;
    gap: 14px;
  }
  .tq-worksheet-mark {
    align-self: flex-start;
  }
  .tq-perfect-worksheet-title {
    font-size: 28px !important;
  }
  .tq-perfect-worksheet-actions {
    padding: 10px 16px 0;
  }
}

/* v6.25.4 — structured chat worksheets, same spirit as whiteboard export */
@media (min-width: 901px) {
  #pedro-ai-app .tq-chat-reborn {
    height: calc(100dvh - 108px);
    max-height: calc(100dvh - 108px);
    min-height: 680px;
  }
  #pedro-ai-app .tq-chat-reborn-container .pedro-chat-messages {
    padding-bottom: 30px;
  }
  #pedro-ai-app .tq-chat-reborn .pedro-msg-content {
    max-width: min(980px, calc(100% - 58px));
  }
  #pedro-ai-app .tq-chat-resource-message .pedro-msg-content {
    max-width: min(1120px, calc(100% - 58px));
  }
  #pedro-ai-app .tq-worksheet-chat-bubble {
    width: min(100%, 1040px);
    max-width: 1040px;
  }
}
.tq-visual-section-badge {
  display: inline-flex;
  width: max-content;
  margin-left: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #F1EFFD;
  border: 1px solid #DCD5F8;
  color: #4C3EC8;
  font-size: 10.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  vertical-align: middle;
}
.tq-visual-instruction {
  padding: 11px 13px;
  border-radius: 14px;
  background: var(--bg);
  border: 1px solid #e5e7eb;
  font-weight: 750;
  color: var(--text-2);
}
.tq-visual-word-bank {
  margin: 10px 0;
  padding: 12px;
  border-radius: 16px;
  background: linear-gradient(135deg,#fff7ed,#ffffff);
  border: 1px solid #fed7aa;
}
.tq-visual-word-bank strong,
.tq-visual-pair-bank strong,
.tq-visual-teacher-box strong {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--text);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.tq-visual-word-bank div,
.tq-visual-pair-bank div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.tq-visual-word-bank span,
.tq-visual-pair-bank span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e5e7eb;
  font-weight: 800;
  color: var(--text-2);
}
.tq-visual-pairs {
  display: grid;
  gap: 10px;
  margin: 12px 0;
}
.tq-visual-pair-bank {
  padding: 12px;
  border-radius: 16px;
  background: var(--bg);
  border: 1px solid #e5e7eb;
}
.tq-visual-pair-list {
  display: grid;
  gap: 8px;
}
.tq-visual-pair-row {
  display: grid;
  grid-template-columns: 30px minmax(120px, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #eef2f7;
  border-radius: 14px;
  background: #fff;
}
.tq-visual-pair-row > span {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--text);
  color: #fff;
  font-weight: 900;
  font-size: 12px;
}
.tq-visual-writing-lines {
  display: grid;
  gap: 14px;
  margin: 14px 0;
}
.tq-visual-writing-lines span {
  display: block;
  height: 22px;
  border-bottom: 2px solid #cbd5e1;
}
.tq-visual-teacher-box {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #14532d;
}
.tq-visual-teacher-box ul {
  margin: 0 0 8px 18px;
  padding: 0;
}
.tq-visual-teacher-box li,
.tq-visual-teacher-box p {
  color: #14532d !important;
  font-size: 13px !important;
}
.tq-visual-extension .p-section-head {
  background: linear-gradient(90deg,#eef2ff,#fff);
}
.tq-visual-teacher-summary .p-section-head {
  background: linear-gradient(90deg,#ecfdf5,#fff);
}
@media (max-width: 760px) {
  .tq-visual-pair-row {
    grid-template-columns: 28px 1fr;
  }
  .tq-visual-pair-row .tq-answer-line {
    grid-column: 2;
    width: 100%;
  }
}

/* Board snapshot framing — Teeqo branded export */
.tq-board-export-frame {
  position: fixed;
  top: -10000px;
  left: -10000px;
  width: 1600px;
  background: #ffffff;
  font-family: Inter, Arial, sans-serif;
  color: var(--text);
  z-index: -1;
  pointer-events: none;
}
.tq-board-export-frame * { box-sizing: border-box; }
.tq-board-export-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding: 32px 36px 22px;
  background: linear-gradient(135deg,#fff1ee 0%,#ffffff 78%);
  border-bottom: 1px solid #f1e5dd;
}
.tq-board-export-kicker {
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 12px;
  font-weight: 900;
  color: #6C5CE7;
}
.tq-board-export-title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 46px;
  line-height: 1;
  letter-spacing: -.04em;
  margin: 6px 0 4px;
  font-weight: 800;
  color: var(--text);
}
.tq-board-export-sub {
  margin: 0;
  color: var(--text-3);
  font-size: 14px;
  font-weight: 600;
}
.tq-board-export-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-3);
}
.tq-board-export-mark {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: var(--text);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 900;
}
.tq-board-export-canvas-wrap {
  padding: 26px 36px;
  background: #fff;
}
.tq-board-export-canvas-wrap img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  border: 1px solid #e5e7eb;
  display: block;
}
.tq-board-export-footer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 26px;
  align-items: center;
  padding: 22px 36px 30px;
  background: linear-gradient(135deg,var(--text) 0%,#7f1d1d 100%);
  color: #fff;
}
.tq-board-export-footer-copy strong {
  display: block;
  font-size: 16px;
  font-weight: 900;
  margin-bottom: 5px;
}
.tq-board-export-footer-copy span {
  display: block;
  font-size: 13px;
  color: rgba(255,255,255,.85);
  line-height: 1.45;
  max-width: 60ch;
}
.tq-board-export-footer-copy small {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.62);
  word-break: break-all;
}
.tq-board-export-qr {
  width: 124px;
  height: 124px;
  background: #fff;
  border-radius: 22px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tq-board-export-qr img {
  width: 100%;
  height: 100%;
  display: block;
}

/* v6.25.6 — robust word-level formatting + student notes reliability */
.tq-wb-v2 .tq-card-title .tq-wb-item-body{
  cursor:default!important;
}
.tq-wb-v2 .tq-card-title .tq-rich-text-editor,
.tq-wb-v2 .tq-card-rich-text .tq-rich-text-editor{
  -webkit-user-select:text!important;
  user-select:text!important;
  -webkit-touch-callout:default!important;
  touch-action:auto!important;
  cursor:text!important;
  caret-color:#6C5CE7!important;
  position:relative!important;
  z-index:2!important;
}
.tq-wb-v2 .tq-card-title .tq-rich-text-editor{
  font-size:clamp(30px,4vw,48px)!important;
  line-height:1.02!important;
  letter-spacing:-.055em!important;
  font-weight:1000!important;
  padding:8px 2px 4px!important;
}
.tq-rich-toolbar{
  position:relative!important;
  z-index:8!important;
  -webkit-user-select:none!important;
  user-select:none!important;
  touch-action:manipulation!important;
}
.tq-rich-hint{
  flex:1 1 150px!important;
  min-width:120px!important;
  color:var(--text-3)!important;
  font-size:10px!important;
  font-weight:900!important;
  text-transform:uppercase!important;
  letter-spacing:.04em!important;
}
.tq-rich-sep{width:1px;height:24px;background:rgba(15,23,42,.12);margin:0 2px;}
.tq-rich-toolbar button{touch-action:manipulation!important;}
.tq-rich-text-editor span{line-height:inherit;}
.tq-collab-actions{display:flex!important;gap:8px!important;flex-wrap:wrap!important;align-items:center!important;}
.tq-collab-actions button,
.tq-collab-open{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:34px!important;
  padding:8px 11px!important;
  border-radius:12px!important;
  border:1px solid rgba(15,23,42,.10)!important;
  background:#fff!important;
  color:var(--text)!important;
  font-size:12px!important;
  font-weight:950!important;
  text-decoration:none!important;
  cursor:pointer!important;
}
.tq-collab-actions button:hover,
.tq-collab-open:hover{background:var(--text)!important;color:#fff!important;border-color:var(--text)!important;}
.tq-collab-status{margin-top:8px;border-radius:12px;background:var(--bg);border:1px solid rgba(15,23,42,.08);padding:8px 10px;color:var(--text-3);font-size:12px;font-weight:850;}
.tq-collab-status.is-error{background:#FEF2F2;border-color:#FECACA;color:#B91C1C;}
.tq-collab-qr.is-qr-error{position:relative;}
.tq-collab-qr.is-qr-error img{opacity:.14;}
.tq-collab-qr.is-qr-error::after{content:attr(data-fallback);position:absolute;inset:10px;display:grid;place-items:center;text-align:center;font-size:10px;font-weight:950;color:#991b1b;line-height:1.15;}
@media (max-width:720px){.tq-rich-hint{display:none!important}.tq-rich-toolbar{gap:4px!important}.tq-rich-sep{display:none!important}.tq-wb-v2 .tq-card-title .tq-rich-text-editor{font-size:32px!important}}

/* v6.25.8 — title cards collapse to pure title until tapped */
.tq-wb-v2 .tq-card-title{
  letter-spacing:0!important;
}
.tq-wb-v2 .tq-card-title.is-title-collapsed{
  width:auto!important;
  min-width:120px!important;
  max-width:min(820px,calc(100% - 18px))!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
  cursor:grab!important;
}
.tq-wb-v2 .tq-card-title.is-title-collapsed:active{cursor:grabbing!important;}
.tq-wb-v2 .tq-card-title.is-title-collapsed .tq-wb-item-head,
.tq-wb-v2 .tq-card-title.is-title-collapsed .tq-rich-toolbar{
  display:none!important;
}
.tq-wb-v2 .tq-card-title.is-title-collapsed .tq-wb-item-body{
  padding:0!important;
  min-height:0!important;
  overflow:visible!important;
  pointer-events:none!important;
  background:transparent!important;
}
.tq-wb-v2 .tq-card-title.is-title-collapsed .tq-rich-text-editor{
  display:block!important;
  min-height:0!important;
  padding:0!important;
  font-size:clamp(30px,46px,58px)!important;
  line-height:1.02!important;
  letter-spacing:0!important;
  font-weight:1000!important;
  color:#6C5CE7!important;
  text-align:center!important;
  text-shadow:0 2px 0 rgba(255,255,255,.95),0 8px 18px rgba(127,29,29,.13)!important;
  white-space:pre-wrap!important;
  overflow-wrap:anywhere!important;
  cursor:grab!important;
  -webkit-user-select:none!important;
  user-select:none!important;
}
.tq-wb-v2 .tq-card-title.is-title-collapsed.tq-wb-size-s .tq-rich-text-editor{font-size:30px!important;}
.tq-wb-v2 .tq-card-title.is-title-collapsed.tq-wb-size-m .tq-rich-text-editor{font-size:40px!important;}
.tq-wb-v2 .tq-card-title.is-title-collapsed.tq-wb-size-l .tq-rich-text-editor{font-size:52px!important;}
.tq-wb-v2 .tq-card-title.is-title-collapsed.tq-wb-size-xl .tq-rich-text-editor{font-size:66px!important;}
.tq-wb-v2 .tq-card-title.is-title-expanded{
  width:min(580px,calc(100% - 18px))!important;
  border:2px solid #6C5CE7!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:0 16px 34px rgba(15,23,42,.14)!important;
  overflow:visible!important;
}
.tq-wb-v2 .tq-card-title.is-title-expanded .tq-wb-item-head{
  display:flex!important;
  background:#fff!important;
  border:0!important;
  border-bottom:1px solid rgba(108,92,231,.12)!important;
  border-radius:16px 16px 0 0!important;
  padding:9px 11px 6px!important;
  margin:0!important;
}
.tq-wb-v2 .tq-card-title.is-title-expanded .tq-wb-item-body{
  padding:10px 11px 12px!important;
  pointer-events:auto!important;
}
.tq-wb-v2 .tq-card-title.is-title-expanded .tq-rich-toolbar{
  display:flex!important;
}
.tq-wb-v2 .tq-card-title.is-title-expanded .tq-rich-text-editor{
  min-height:70px!important;
  font-size:42px!important;
  letter-spacing:0!important;
  text-align:center!important;
}

/* v6.26.0 — all placed elements show content first, chrome only when selected */
.tq-wb-v2 .tq-wb-item.is-card-collapsed:not(.is-selected):not(.tq-wb-item-stamp){
  border-color:transparent!important;
  background:transparent!important;
  box-shadow:none!important;
  outline:0!important;
  overflow:visible!important;
}
.tq-wb-v2 .tq-wb-item.is-card-collapsed:not(.is-selected):not(.tq-wb-item-stamp):hover{
  box-shadow:none!important;
}
.tq-wb-v2 .tq-wb-item.is-card-collapsed:not(.is-selected):not(.tq-wb-item-stamp) .tq-wb-item-head{
  display:none!important;
}
.tq-wb-v2 .tq-wb-item.is-card-collapsed:not(.is-selected):not(.tq-wb-item-stamp) .tq-wb-item-body{
  padding:0!important;
  background:transparent!important;
  border:0!important;
  min-height:0!important;
  overflow:visible!important;
}
.tq-wb-v2 .tq-wb-item.is-card-collapsed:not(.is-selected):not(.tq-wb-item-stamp) .tq-wb-item-body[contenteditable],
.tq-wb-v2 .tq-wb-item.is-card-collapsed:not(.is-selected):not(.tq-wb-item-stamp) .tq-wb-item-body [contenteditable]{
  cursor:grab!important;
}
.tq-wb-v2 .tq-wb-item.is-card-expanded.is-selected{
  background:#fff!important;
  box-shadow:0 22px 55px rgba(37,99,235,.18)!important;
}
#tq-wb-undo:disabled,
#tq-wb-redo:disabled{
  opacity:.42!important;
  cursor:not-allowed!important;
  box-shadow:none!important;
}

/* v6.26.1 — restore visible card windows; collapsed classes are now legacy only. */
.tq-wb-v2 .tq-wb-item.is-card-collapsed:not(.tq-wb-item-stamp),
.tq-wb-v2 .tq-wb-item.is-card-expanded{
  background:#fff!important;
  box-shadow:0 16px 34px rgba(15,23,42,.14)!important;
  outline:0!important;
  overflow:visible!important;
}
.tq-wb-v2 .tq-wb-item.is-card-collapsed:not(.tq-wb-item-stamp):hover{
  box-shadow:0 18px 38px rgba(15,23,42,.16)!important;
}
.tq-wb-v2 .tq-wb-item.is-card-collapsed:not(.tq-wb-item-stamp) .tq-wb-item-head{
  display:flex!important;
}
.tq-wb-v2 .tq-wb-item.is-card-collapsed:not(.tq-wb-item-stamp) .tq-wb-item-body{
  padding:10px 11px 12px!important;
  background:transparent!important;
  min-height:0!important;
  overflow:visible!important;
  pointer-events:auto!important;
}
.tq-wb-v2 .tq-card-title.is-title-collapsed,
.tq-wb-v2 .tq-card-title.is-title-expanded{
  width:min(580px,calc(100% - 18px))!important;
  border:2px solid #6C5CE7!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:0 16px 34px rgba(15,23,42,.14)!important;
  overflow:visible!important;
}
.tq-wb-v2 .tq-card-title.is-title-collapsed .tq-wb-item-head,
.tq-wb-v2 .tq-card-title.is-title-expanded .tq-wb-item-head{
  display:flex!important;
  background:#fff!important;
  border:0!important;
  border-bottom:1px solid rgba(108,92,231,.12)!important;
  border-radius:16px 16px 0 0!important;
  padding:9px 11px 6px!important;
  margin:0!important;
}
.tq-wb-v2 .tq-card-title.is-title-collapsed .tq-wb-item-body,
.tq-wb-v2 .tq-card-title.is-title-expanded .tq-wb-item-body{
  padding:10px 11px 12px!important;
  pointer-events:auto!important;
}
.tq-wb-v2 .tq-card-title.is-title-collapsed .tq-rich-toolbar,
.tq-wb-v2 .tq-card-title.is-title-expanded .tq-rich-toolbar{
  display:flex!important;
}
.tq-wb-v2 .tq-card-title.is-title-collapsed .tq-rich-text-editor,
.tq-wb-v2 .tq-card-title.is-title-expanded .tq-rich-text-editor{
  min-height:70px!important;
  font-size:42px!important;
  letter-spacing:0!important;
  text-align:center!important;
  cursor:text!important;
  -webkit-user-select:text!important;
  user-select:text!important;
}

/* v6.25.8 — board games keep their identity inside the whiteboard */
.tq-card-board-game{min-width:min(580px,calc(100% - 18px))!important;}
.tq-card-board-game .tq-wb-item-body{padding:0!important;background:#fff!important;overflow:hidden!important;}
.tq-wb-game-shell{min-height:260px;contain:content;background:#fff;}
.tq-wb-game-live{max-height:min(70vh,680px);overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
.tq-wb-qf,.tq-wb-pictionary,.tq-wb-color-roulette,.tq-wb-monster,.tq-wb-clock,.tq-wb-room,.tq-wb-conj,.tq-wb-arcade{display:grid;gap:10px;}
.tq-wb-qf-status,.tq-wb-room-head,.tq-wb-arcade-top{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:950;color:var(--text);}
.tq-wb-qf-status span,.tq-wb-room-head span,.tq-wb-arcade-top span{border-radius:999px;background:var(--surface-2);color:var(--text-3);padding:5px 9px;font-size:11px;font-weight:950;}
.tq-wb-qf-scene,.tq-wb-room-scene{position:relative;min-height:270px;aspect-ratio:16/9;border-radius:18px;background:var(--bg);border:1px solid rgba(15,23,42,.10);overflow:hidden;}
.tq-wb-qf-scene button,.tq-wb-room-scene button{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:grid;place-items:center;gap:2px;min-width:58px;min-height:58px;border:1px solid rgba(15,23,42,.10);border-radius:16px;background:#fff;color:var(--text);font-weight:950;box-shadow:0 8px 18px rgba(15,23,42,.08);cursor:pointer;}
.tq-wb-qf-scene button span{font-size:28px;line-height:1;}
.tq-wb-qf-scene button b{font-size:10px;max-width:86px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tq-wb-qf-scene button.is-hidden{opacity:.08;filter:grayscale(1);}
.tq-wb-qf-scene button.is-answer{background:#DCFCE7;border-color:#22C55E;color:#166534;box-shadow:0 0 0 3px rgba(34,197,94,.22),0 10px 24px rgba(22,101,52,.16);}
.tq-wb-qf-controls,.tq-wb-pic-actions,.tq-wb-arcade-actions,.tq-wb-conj-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;}
.tq-wb-qf-controls button,.tq-wb-qf-options button,.tq-wb-pic-actions button,.tq-wb-color-roulette button,.tq-wb-monster .next,.tq-wb-clock button,.tq-wb-conj-actions button,.tq-wb-arcade-actions button{border:0;border-radius:999px;background:var(--text);color:#fff;padding:8px 10px;font-size:12px;font-weight:950;cursor:pointer;}
.tq-wb-qf-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;}
.tq-wb-qf-options button{background:#fff;color:var(--text);border:1px solid rgba(15,23,42,.12);border-radius:14px;}
.tq-wb-qf-options button:disabled{cursor:default;opacity:1;}
.tq-wb-qf-options button.is-correct,.tq-wb-arcade-options button.is-correct{background:#DCFCE7!important;border-color:#22C55E!important;color:#166534!important;}
.tq-wb-qf-options button.is-wrong,.tq-wb-arcade-options button.is-wrong{background:#FEE2E2!important;border-color:#EF4444!important;color:#991B1B!important;}
.tq-wb-qf-hint{border-radius:14px;background:#FFF7ED;border:1px solid #FED7AA;color:#9A3412;padding:9px 11px;font-weight:850;font-size:12px;}
.tq-wb-pic-stage{display:grid;place-items:center;gap:5px;min-height:230px;border-radius:20px;background:var(--bg);border:1px dashed rgba(15,23,42,.18);text-align:center;}
.tq-wb-pic-stage span{font-size:74px;filter:blur(9px);transition:filter .18s ease;}
.tq-wb-pic-stage.is-revealed span{filter:none;}
.tq-wb-pic-stage b{font-family:var(--font-head);font-size:28px;font-weight:950;color:var(--text);letter-spacing:0;}
.tq-wb-pic-stage small{font-size:12px;font-weight:900;color:var(--text-3);}
.tq-wb-pic-hints{display:flex;flex-wrap:wrap;gap:6px;}
.tq-wb-pic-hints span,.tq-wb-color-objects span,.tq-wb-room-list span{border-radius:999px;background:var(--surface-2);color:var(--text-2);padding:6px 9px;font-size:11px;font-weight:900;}
.tq-wb-color-roulette{place-items:center;text-align:center;}
.tq-wb-color-wheel{display:grid;place-items:center;width:118px;height:118px;border-radius:999px;font-size:42px;box-shadow:0 14px 28px rgba(15,23,42,.14);}
.tq-wb-color-wheel.is-spinning{animation:tqWbSpin .26s linear 1;}
@keyframes tqWbSpin{to{transform:rotate(360deg)}}
.tq-wb-color-picked{display:grid;gap:2px;padding:10px 18px;border-radius:18px;background:var(--picked);color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.24);}
.tq-wb-color-picked b{font-family:var(--font-head);font-size:28px;font-weight:950;letter-spacing:0;}
.tq-wb-color-picked small{font-size:12px;font-weight:900;}
.tq-wb-color-objects{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;}
.tq-wb-monster-face{display:grid;place-items:center;gap:5px;min-height:130px;border-radius:20px;background:var(--monster);color:#fff;text-align:center;}
.tq-wb-monster-face span{font-size:52px;}
.tq-wb-monster-face b{font-family:var(--font-head);font-size:24px;font-weight:950;letter-spacing:0;}
.tq-wb-monster-steps{display:grid;gap:7px;}
.tq-wb-monster-steps button{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:center;text-align:left;border:1px solid rgba(15,23,42,.10);border-radius:14px;background:#fff;color:var(--text);padding:9px 10px;font-weight:900;cursor:pointer;}
.tq-wb-monster-steps button b{display:grid;place-items:center;width:24px;height:24px;border-radius:999px;background:var(--text);color:#fff;font-size:11px;}
.tq-wb-monster-steps button.is-used{background:#DCFCE7;border-color:#22C55E;color:#166534;}
.tq-wb-clock{grid-template-columns:190px minmax(0,1fr);align-items:center;}
.tq-wb-clock-face{position:relative;width:170px;height:170px;border-radius:999px;background:#fff;border:8px solid var(--text);box-shadow:inset 0 0 0 2px #fff,0 12px 26px rgba(15,23,42,.14);}
.tq-wb-clock-face i{position:absolute;left:50%;bottom:50%;transform-origin:50% 100%;border-radius:999px;background:var(--text);}
.tq-wb-clock-face i.h{width:7px;height:48px;margin-left:-3px;}
.tq-wb-clock-face i.m{width:4px;height:66px;margin-left:-2px;background:#6C5CE7;}
.tq-wb-clock-face b{position:absolute;font-size:13px;font-weight:950;color:var(--text);}
.tq-wb-clock-face b:nth-of-type(1){top:8px;left:50%;transform:translateX(-50%);}
.tq-wb-clock-face b:nth-of-type(2){right:10px;top:50%;transform:translateY(-50%);}
.tq-wb-clock-face b:nth-of-type(3){bottom:8px;left:50%;transform:translateX(-50%);}
.tq-wb-clock-face b:nth-of-type(4){left:12px;top:50%;transform:translateY(-50%);}
.tq-wb-clock-side{display:grid;gap:8px;}
.tq-wb-clock-side strong{font-family:var(--font-head);font-size:20px;color:var(--text);}
.tq-wb-clock-side span{font-weight:850;color:var(--text-3);}
.tq-wb-clock-side em{font-style:normal;border-radius:14px;background:#DCFCE7;color:#166534;padding:9px 10px;font-weight:950;}
.tq-wb-room-scene button{font-size:28px;}
.tq-wb-room-scene button.is-found{background:#DCFCE7;border-color:#22C55E;}
.tq-wb-room-list{display:flex;flex-wrap:wrap;gap:6px;}
.tq-wb-room-list span.is-found{text-decoration:line-through;background:#DCFCE7;color:#166534;}
.tq-wb-conj-card{display:grid;gap:8px;text-align:center;padding:18px;border-radius:20px;background:#EFF6FF;border:1px solid #BFDBFE;}
.tq-wb-conj-card small{font-size:11px;font-weight:950;text-transform:uppercase;color:#1D4ED8;}
.tq-wb-conj-card b{font-family:var(--font-head);font-size:30px;color:var(--text);letter-spacing:0;}
.tq-wb-conj-card span{border-radius:14px;background:var(--text);color:#fff;padding:10px;font-size:24px;font-weight:950;}
.tq-wb-arcade-prompt{padding:12px;border-radius:16px;background:#fff;border:1px solid rgba(15,23,42,.10);font-weight:950;color:var(--text);}
.tq-wb-arcade-options{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-height:180px;border-radius:18px;background:var(--bg);border:1px solid rgba(15,23,42,.08);padding:12px;}
.tq-wb-arcade-options button,.tq-wb-sequence-letters button{border:1px solid rgba(15,23,42,.10);border-radius:16px;background:#fff;color:var(--text);padding:10px;font-weight:950;cursor:pointer;box-shadow:0 6px 14px rgba(15,23,42,.05);}
.tq-wb-arcade-objetivo_movil .tq-wb-arcade-options button.is-target{position:absolute;left:var(--tx);top:var(--ty);min-width:120px;background:#6C5CE7;color:#fff;border-color:#6C5CE7;}
.tq-wb-arcade-options button.is-destroyed{opacity:.2;text-decoration:line-through;transform:scale(.96);}
.tq-wb-sequence-target{text-align:center;border-radius:18px;background:var(--text);color:#fff;padding:12px;font-family:var(--font-head);font-size:24px;font-weight:950;letter-spacing:0;}
.tq-wb-sequence-letters{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;}
.tq-wb-sequence-letters button{min-width:40px;font-size:18px;}
@media (max-width:760px){
  .tq-card-board-game{min-width:min(320px,calc(100% - 18px))!important;}
  .tq-wb-clock{grid-template-columns:1fr;justify-items:center;}
  .tq-wb-qf-options,.tq-wb-arcade-options{grid-template-columns:1fr;}
  .tq-wb-qf-controls,.tq-wb-pic-actions,.tq-wb-arcade-actions,.tq-wb-conj-actions{grid-template-columns:1fr;}
}

/* v6.25.8 — lighter whiteboard for native smart-screen browsers */
.tq-wb-v2.tq-wb-lite,
.tq-wb-v2.tq-wb-lite *{
  transition:none!important;
  scroll-behavior:auto!important;
}
.tq-wb-v2.tq-wb-lite *{
  animation:none!important;
}
.tq-wb-v2.tq-wb-lite .tq-wb-item,
.tq-wb-v2.tq-wb-lite .tq-wb-v2-stage,
.tq-wb-v2.tq-wb-lite .tq-wb-v2-topbar,
.tq-wb-v2.tq-wb-lite .tq-wb-dock-panel,
.tq-wb-v2.tq-wb-lite .tq-wb-game-shell,
.tq-wb-v2.tq-wb-lite .tq-wb-game-head>span,
.tq-wb-v2.tq-wb-lite .tq-wb-color-wheel,
.tq-wb-v2.tq-wb-lite .tq-wb-clock-face{
  box-shadow:none!important;
  filter:none!important;
  backdrop-filter:none!important;
}
.tq-wb-v2.tq-wb-lite .tq-wb-item,
.tq-wb-v2.tq-wb-lite #tq-whiteboard-canvas{
  transform:none!important;
  backface-visibility:visible!important;
}
.tq-wb-v2.tq-wb-lite .tq-wb-v2-stage{
  border-radius:14px!important;
}
.tq-wb-v2.tq-wb-lite .tq-whiteboard-world,
.tq-wb-v2.tq-wb-lite .tq-whiteboard-elements{
  contain:layout paint!important;
}
.tq-wb-v2.tq-wb-lite .tq-wb-game-live{
  max-height:520px!important;
}
.tq-wb-v2.tq-wb-lite .tq-wb-pic-stage span{
  filter:none!important;
  opacity:.32!important;
}
.tq-wb-v2.tq-wb-lite .tq-wb-pic-stage.is-revealed span{
  opacity:1!important;
}
.tq-wb-v2.tq-wb-lite .tq-wb-item:hover,
.tq-wb-v2.tq-wb-lite button:hover{
  transform:none!important;
}

/* Final contrast guard: Titulo/Timer stay readable even with cached hover styles. */
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2 .tq-wb-elements-v6203 button.tq-add-title,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2 .tq-wb-elements-v6203 button.tq-add-title:hover,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2 .tq-wb-elements-v6203 button.tq-add-title:focus,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2 .tq-wb-elements-v6203 button.tq-add-title:focus-visible,
.tq-wb-elements-v6203 button.tq-add-title,
.tq-wb-elements-v6203 button.tq-add-title:hover,
.tq-wb-elements-v6203 button.tq-add-title:focus,
.tq-wb-elements-v6203 button.tq-add-title:focus-visible,
.tq-wb-add-elements-grid button.tq-add-title,
.tq-wb-add-elements-grid button.tq-add-title:hover,
.tq-wb-add-elements-grid button.tq-add-title:focus,
.tq-wb-add-elements-grid button.tq-add-title:focus-visible{
  background:linear-gradient(145deg,#FFF1F2,#FFFFFF)!important;
  border-color:#FB7185!important;
  color:var(--text)!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2 .tq-wb-elements-v6203 button.tq-add-timer,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2 .tq-wb-elements-v6203 button.tq-add-timer:hover,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2 .tq-wb-elements-v6203 button.tq-add-timer:focus,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2 .tq-wb-elements-v6203 button.tq-add-timer:focus-visible,
.tq-wb-elements-v6203 button.tq-add-timer,
.tq-wb-elements-v6203 button.tq-add-timer:hover,
.tq-wb-elements-v6203 button.tq-add-timer:focus,
.tq-wb-elements-v6203 button.tq-add-timer:focus-visible,
.tq-wb-add-elements-grid button.tq-add-timer,
.tq-wb-add-elements-grid button.tq-add-timer:hover,
.tq-wb-add-elements-grid button.tq-add-timer:focus,
.tq-wb-add-elements-grid button.tq-add-timer:focus-visible{
  background:linear-gradient(145deg,var(--bg),#FFFFFF)!important;
  border-color:var(--text-4)!important;
  color:var(--text)!important;
}
.tq-wb-elements-v6203 button.tq-add-title b,
.tq-wb-elements-v6203 button.tq-add-title small,
.tq-wb-elements-v6203 button.tq-add-title:hover b,
.tq-wb-elements-v6203 button.tq-add-title:hover small,
.tq-wb-elements-v6203 button.tq-add-title:focus b,
.tq-wb-elements-v6203 button.tq-add-title:focus small,
.tq-wb-elements-v6203 button.tq-add-timer b,
.tq-wb-elements-v6203 button.tq-add-timer small,
.tq-wb-elements-v6203 button.tq-add-timer:hover b,
.tq-wb-elements-v6203 button.tq-add-timer:hover small,
.tq-wb-elements-v6203 button.tq-add-timer:focus b,
.tq-wb-elements-v6203 button.tq-add-timer:focus small,
.tq-wb-add-elements-grid button.tq-add-title b,
.tq-wb-add-elements-grid button.tq-add-title small,
.tq-wb-add-elements-grid button.tq-add-title:hover b,
.tq-wb-add-elements-grid button.tq-add-title:hover small,
.tq-wb-add-elements-grid button.tq-add-title:focus b,
.tq-wb-add-elements-grid button.tq-add-title:focus small,
.tq-wb-add-elements-grid button.tq-add-timer b,
.tq-wb-add-elements-grid button.tq-add-timer small,
.tq-wb-add-elements-grid button.tq-add-timer:hover b,
.tq-wb-add-elements-grid button.tq-add-timer:hover small,
.tq-wb-add-elements-grid button.tq-add-timer:focus b,
.tq-wb-add-elements-grid button.tq-add-timer:focus small{
  color:var(--text)!important;
  -webkit-text-fill-color:var(--text)!important;
  opacity:1!important;
  text-shadow:none!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2 .tq-wb-elements-v6203 button.tq-add-title b,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2 .tq-wb-elements-v6203 button.tq-add-title small,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2 .tq-wb-elements-v6203 button.tq-add-title:hover b,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2 .tq-wb-elements-v6203 button.tq-add-title:hover small,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2 .tq-wb-elements-v6203 button.tq-add-title:focus b,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2 .tq-wb-elements-v6203 button.tq-add-title:focus small,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2 .tq-wb-elements-v6203 button.tq-add-timer b,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2 .tq-wb-elements-v6203 button.tq-add-timer small,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2 .tq-wb-elements-v6203 button.tq-add-timer:hover b,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2 .tq-wb-elements-v6203 button.tq-add-timer:hover small,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2 .tq-wb-elements-v6203 button.tq-add-timer:focus b,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2 .tq-wb-elements-v6203 button.tq-add-timer:focus small{
  color:var(--text)!important;
  -webkit-text-fill-color:var(--text)!important;
  opacity:1!important;
  text-shadow:none!important;
}

/* v6.28.0 — rebuilt Añadir elementos widgets */
.tq-wb-v2 .tq-native-item .tq-wb-item-body{padding:10px!important;}
.tq-native-card{display:grid;gap:10px;width:100%;box-sizing:border-box;color:var(--text);font-weight:850;line-height:1.35;}
.tq-native-card [contenteditable="true"]{outline:0;border-radius:10px;min-height:20px;cursor:text;-webkit-user-select:text;user-select:text;}
.tq-native-card [contenteditable="true"]:focus{box-shadow:0 0 0 3px rgba(37,99,235,.14);background:#fff;}
.tq-native-card [contenteditable="true"][data-placeholder]:empty::before{content:attr(data-placeholder);color:var(--text-4);}
.tq-native-row,.tq-native-note-row,.tq-timer-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.tq-native-card button,.tq-native-clickable,.tq-timer-actions button{border:1px solid rgba(15,23,42,.12);border-radius:12px;background:#fff;color:var(--text);font-size:12px;font-weight:950;padding:8px 10px;cursor:pointer;box-shadow:0 4px 12px rgba(15,23,42,.05);}
.tq-native-card button:hover,.tq-native-clickable:hover,.tq-timer-actions button:hover{border-color:rgba(108,92,231,.32);background:#fff7f7;color:#991b1b;}
.tq-native-card button.is-done,.tq-native-card .is-done{background:#dcfce7!important;border-color:#22c55e!important;color:#166534!important;}
.tq-native-toolbar{display:flex;align-items:center;gap:5px;flex-wrap:wrap;padding:6px;border-radius:14px;background:var(--bg);border:1px solid rgba(15,23,42,.08);}
.tq-native-toolbar button{min-width:30px;height:30px;padding:0 8px;border-radius:10px;}
.tq-native-swatch{width:28px!important;min-width:28px!important;padding:0!important;background:var(--c)!important;color:transparent!important;border:2px solid #fff!important;box-shadow:0 0 0 1px rgba(15,23,42,.2)!important;}
.tq-native-editor{min-height:112px;padding:12px;border:1px solid rgba(15,23,42,.10);background:#fff;border-radius:14px;font-size:24px;font-weight:850;white-space:pre-wrap;overflow-wrap:anywhere;}
.tq-native-note-editor{min-height:110px;padding:14px;border-radius:16px;background:#fff7c2;border:1px solid rgba(245,158,11,.26);font-size:21px;font-weight:900;white-space:pre-wrap;overflow-wrap:anywhere;}
.tq-native-title-main{font-family:var(--font-head);font-size:44px;line-height:1.02;font-weight:1000;text-align:center;color:#6C5CE7;letter-spacing:0;overflow-wrap:anywhere;}
.tq-native-title-sub{font-size:15px;text-align:center;color:var(--text-3);font-weight:850;min-height:22px;}
.tq-native-objective{padding:2px;}
.tq-native-objective>span{font-size:12px;font-weight:1000;color:#991b1b;text-transform:uppercase;letter-spacing:.06em;}
.tq-native-objective-main{padding:12px;border-radius:15px;background:#fff;border:1px solid rgba(108,92,231,.14);font-family:var(--font-head);font-size:20px;font-weight:950;color:var(--text);}
.tq-native-checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;}
.tq-native-flip-stage{perspective:900px;min-height:160px;}
.tq-native-flip-inner{position:relative;min-height:160px;transform-style:preserve-3d;transition:transform .28s ease;}
.tq-native-flip.is-flipped .tq-native-flip-inner{transform:rotateY(180deg);}
.tq-native-flip-face{position:absolute;inset:0;display:grid;place-items:center;padding:12px;border-radius:16px;border:1px solid rgba(15,23,42,.10);background:#fff;backface-visibility:hidden;}
.tq-native-flip-back{transform:rotateY(180deg);background:#eff6ff;}
.tq-native-flip-edit{width:100%;text-align:center;font-family:var(--font-head);font-size:24px;font-weight:950;overflow-wrap:anywhere;}
.tq-native-vocab-focus{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:center;padding:11px;border-radius:16px;background:#ecfdf5;border:1px solid rgba(16,185,129,.24);}
.tq-native-vocab-focus b{grid-row:span 2;font-size:38px;line-height:1;}
.tq-native-vocab-focus strong{font-family:var(--font-head);font-size:22px;font-weight:1000;color:#064e3b;}
.tq-native-vocab-focus small{font-size:12px;color:#047857;font-weight:900;}
.tq-native-vocab-bank{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.tq-native-vocab-token{display:grid!important;gap:3px!important;text-align:center!important;padding:10px!important;min-height:86px;}
.tq-native-vocab-token span{font-size:25px;line-height:1;}
.tq-native-vocab-token b{font-size:15px;font-weight:1000;}
.tq-native-vocab-token small{font-size:11px;color:var(--text-3);font-weight:850;}
.tq-native-vocab-token.is-active{background:#dcfce7!important;border-color:#22c55e!important;}
.tq-native-vocab.is-quiz-mode .tq-native-vocab-token small{visibility:hidden;}
.tq-native-verbs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.tq-native-verb{display:grid!important;gap:4px!important;min-height:76px!important;text-align:center!important;}
.tq-native-verb b{font-family:var(--font-head);font-size:18px;font-weight:1000;color:#1d4ed8;}
.tq-native-verb span{font-size:13px;color:var(--text-3);font-weight:900;}
.tq-native-verbs.is-oral-mode .tq-native-verb span{visibility:hidden;}
.tq-native-traffic{justify-items:center;width:max-content;min-width:96px;margin:0 auto;padding:14px 12px;border-radius:34px;background:var(--text);box-shadow:inset 0 0 0 4px rgba(255,255,255,.08),0 16px 30px rgba(15,23,42,.24);}
.tq-native-traffic button{width:58px;height:58px;border-radius:999px;border:5px solid rgba(255,255,255,.12);box-shadow:inset 0 8px 16px rgba(255,255,255,.22),inset 0 -10px 18px rgba(0,0,0,.24);font-size:0;padding:0;}
.tq-native-traffic [data-native-traffic="red"]{background:#7f1d1d;}
.tq-native-traffic [data-native-traffic="amber"]{background:#92400e;}
.tq-native-traffic [data-native-traffic="green"]{background:#14532d;}
.tq-native-traffic [data-native-traffic="red"].is-selected{background:#ef4444;box-shadow:0 0 24px rgba(239,68,68,.85),inset 0 8px 16px rgba(255,255,255,.28);}
.tq-native-traffic [data-native-traffic="amber"].is-selected{background:#f59e0b;box-shadow:0 0 24px rgba(245,158,11,.85),inset 0 8px 16px rgba(255,255,255,.28);}
.tq-native-traffic [data-native-traffic="green"].is-selected{background:#22c55e;box-shadow:0 0 24px rgba(34,197,94,.85),inset 0 8px 16px rgba(255,255,255,.28);}
.tq-native-transform label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#6d28d9;font-weight:1000;}
.tq-native-transform-source{min-height:54px;padding:11px;border-radius:14px;background:#fff;border:1px solid rgba(124,58,237,.18);font-size:17px;font-weight:950;}
.tq-native-transform-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;}
.tq-native-transform-modes button.is-active{background:#7c3aed!important;border-color:#7c3aed!important;color:#fff!important;}
.tq-native-transform-output{min-height:58px;padding:11px;border-radius:14px;background:var(--bg);border:1px solid rgba(15,23,42,.08);font-size:14px;font-weight:900;white-space:pre-wrap;}
.tq-native-transform-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;}
.tq-native-transform-steps span{padding:7px 8px;border-radius:11px;background:#f5f3ff;color:#5b21b6;font-size:11px;font-weight:950;}
.tq-native-spinner-result{display:grid;place-items:center;min-height:86px;padding:14px;border-radius:18px;background:#f5f3ff;border:1px solid rgba(124,58,237,.18);font-family:var(--font-head);font-size:22px;font-weight:1000;text-align:center;color:#4c1d95;}
.tq-native-spinner-bank{padding:9px;border-radius:13px;background:#fff;border:1px dashed rgba(124,58,237,.22);font-size:12px;color:var(--text-3);}
.tq-native-exit{gap:8px;}
.tq-native-exit-step{display:flex!important;justify-content:flex-start!important;text-align:left!important;min-height:48px!important;background:#fff7ed!important;border-color:#fed7aa!important;}
.tq-native-exit-step span{width:100%;}
.tq-native-media{gap:8px;}
.tq-native-media img{display:block;width:100%;height:auto;max-height:420px;object-fit:contain;border-radius:14px;background:var(--bg);border:1px solid rgba(15,23,42,.08);}
.tq-native-media iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:14px;background:var(--text);}
.tq-media-caption{padding:9px 10px;border-radius:12px;background:#fff;border:1px solid rgba(15,23,42,.10);font-size:13px;font-weight:850;color:var(--text-2);}
.tq-native-timer{place-items:center;text-align:center;}
.tq-native-timer .tq-timer-clock{font-family:var(--font-head);font-size:48px;font-weight:1000;line-height:1;color:var(--text);}
.tq-native-timer .tq-timer-bar{width:100%;height:10px;border-radius:999px;background:var(--border);overflow:hidden;}
.tq-native-timer .tq-timer-bar span{display:block;height:100%;border-radius:999px;background:#6C5CE7;transition:width .2s ease;}
.tq-card-timer.is-done .tq-native-timer .tq-timer-clock{color:#dc2626;}
@media (max-width:520px){
  .tq-native-checks,.tq-native-transform-modes,.tq-native-transform-steps,.tq-native-vocab-bank,.tq-native-verbs-grid{grid-template-columns:1fr!important;}
  .tq-native-title-main{font-size:36px;}
}

/* v6.29.0 — stable premium tools + direct editing */
#pedro-ai-app.pedro-whiteboard-mode .tq-native-item{
  border-radius:16px!important;
  background:#fff!important;
  border-width:2px!important;
  box-shadow:0 18px 42px rgba(15,23,42,.12)!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-card,
#pedro-ai-app.pedro-whiteboard-mode .tq-native-card *{
  -webkit-user-select:auto!important;
  user-select:auto!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-card [contenteditable="true"],
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-item-body[contenteditable="true"]{
  -webkit-user-select:text!important;
  user-select:text!important;
  pointer-events:auto!important;
  cursor:text!important;
  caret-color:var(--text)!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-card [contenteditable="true"][data-placeholder=""]:empty::before,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-item-body[contenteditable="true"][data-placeholder=""]:empty::before{
  content:''!important;
}
.tq-native-note{position:relative;min-height:150px;padding:4px;}
.tq-native-note::after{content:'';position:absolute;right:12px;top:12px;width:52px;height:52px;border-radius:999px;background:rgba(255,255,255,.42);pointer-events:none;}
.tq-native-note-editor{min-height:132px!important;font-size:22px!important;background:linear-gradient(145deg,#fff7bc,#fde68a)!important;border-color:rgba(245,158,11,.26)!important;}
.tq-native-text .tq-native-editor{min-height:150px!important;font-size:24px!important;}
.tq-native-title-main{min-height:74px!important;padding:8px 4px!important;}
.tq-native-title-sub{padding:4px!important;}
.tq-native-objective-main,.tq-native-transform-source,.tq-native-spinner-bank,.tq-media-caption{min-height:42px!important;}
.tq-native-clickable [contenteditable="true"]{
  -webkit-user-select:text!important;
  user-select:text!important;
}
.tq-whiteboard-viewport{
  margin-left:0!important;
  padding-left:0!important;
}
.tq-whiteboard-viewport > .tq-whiteboard-world{
  left:0!important;
}

/* v6.29.1 — pizarra: edición de texto estable, título limpio y nota amarilla */
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-item-body[contenteditable="true"],
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-item-body [contenteditable="true"],
#pedro-ai-app.pedro-whiteboard-mode .tq-native-card [contenteditable="true"]{
  -webkit-user-select:text!important;
  user-select:text!important;
  -webkit-touch-callout:default!important;
  touch-action:auto!important;
  cursor:text!important;
  caret-color:var(--text)!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-editable:focus,
#pedro-ai-app.pedro-whiteboard-mode .tq-native-card [contenteditable="true"]:focus{
  outline:2px solid rgba(37,99,235,.18)!important;
  outline-offset:2px!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-toolbar-rich{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:6px!important;
  max-width:min(560px,86vw)!important;
  padding:8px!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-toolbar-rich button{
  min-width:28px!important;
  height:28px!important;
  padding:0 8px!important;
  border-radius:9px!important;
  font-size:12px!important;
  line-height:1!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-toolbar .tq-native-sep{
  width:1px!important;
  height:22px!important;
  margin:0 2px!important;
  background:rgba(15,23,42,.14)!important;
  display:inline-block!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-toolbar .tq-native-highlight{
  background:#FEF3C7!important;
  color:#92400E!important;
  border-color:#F59E0B!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-toolbar .tq-native-highlight-blue{
  background:#DBEAFE!important;
  color:#1D4ED8!important;
  border-color:#60A5FA!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-toolbar .tq-native-highlight-green{
  background:#DCFCE7!important;
  color:#166534!important;
  border-color:#86EFAC!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-editor font[size="2"]{font-size:14px!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-editor font[size="3"]{font-size:18px!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-editor font[size="4"]{font-size:24px!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-editor font[size="5"]{font-size:32px!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-editor font[size="6"]{font-size:42px!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-editor ul,
#pedro-ai-app.pedro-whiteboard-mode .tq-native-editor ol{
  margin:6px 0 6px 22px!important;
  padding:0!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-rich-card .tq-wb-item-body{
  min-width:min(560px,86vw)!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-note-card,
#pedro-ai-app.pedro-whiteboard-mode .tq-native-note-card.is-card-expanded,
#pedro-ai-app.pedro-whiteboard-mode .tq-native-note-card.is-card-collapsed,
#pedro-ai-app.pedro-whiteboard-mode .tq-card-student-note,
#pedro-ai-app.pedro-whiteboard-mode .tq-card-note{
  background:#FEF3C7!important;
  border-color:#F59E0B!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-note-card .tq-wb-item-head,
#pedro-ai-app.pedro-whiteboard-mode .tq-card-student-note .tq-wb-item-head,
#pedro-ai-app.pedro-whiteboard-mode .tq-card-note .tq-wb-item-head{
  background:#FEF3C7!important;
  border-bottom-color:rgba(146,64,14,.18)!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-note,
#pedro-ai-app.pedro-whiteboard-mode .tq-native-note-editor,
#pedro-ai-app.pedro-whiteboard-mode .tq-native-note-card .tq-wb-item-body,
#pedro-ai-app.pedro-whiteboard-mode .tq-card-student-note .tq-wb-item-body,
#pedro-ai-app.pedro-whiteboard-mode .tq-card-note .tq-wb-item-body{
  background:#FEF3C7!important;
  border-color:transparent!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-note-editor{
  box-shadow:none!important;
  min-height:82px!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2 .tq-card-title.is-title-collapsed,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2 .tq-card-title.is-title-collapsed.is-selected,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2 .tq-card-title.is-title-collapsed.is-card-collapsed{
  width:auto!important;
  min-width:28px!important;
  max-width:min(760px,94vw)!important;
  border-color:transparent!important;
  background:transparent!important;
  box-shadow:none!important;
  outline:0!important;
  overflow:visible!important;
  padding:0!important;
  cursor:grab!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2 .tq-card-title.is-title-collapsed:active{cursor:grabbing!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2 .tq-card-title.is-title-collapsed .tq-wb-item-head,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2 .tq-card-title.is-title-collapsed .tq-rich-toolbar,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2 .tq-card-title.is-title-collapsed .tq-native-toolbar,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2 .tq-card-title.is-title-collapsed .tq-native-title-sub{
  display:none!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2 .tq-card-title.is-title-collapsed .tq-wb-item-body{
  display:block!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  min-height:0!important;
  pointer-events:none!important;
  overflow:visible!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2 .tq-card-title.is-title-collapsed .tq-native-card,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2 .tq-card-title.is-title-collapsed .tq-native-title,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2 .tq-card-title.is-title-collapsed .tq-rich-text-card{
  display:block!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2 .tq-card-title.is-title-collapsed .tq-native-title-main,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2 .tq-card-title.is-title-collapsed .tq-rich-text-editor,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2 .tq-card-title.is-title-collapsed .tq-title-editable{
  width:auto!important;
  max-width:min(760px,94vw)!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  outline:0!important;
  text-align:center!important;
  cursor:grab!important;
  pointer-events:none!important;
  -webkit-user-select:none!important;
  user-select:none!important;
  white-space:pre-wrap!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2 .tq-card-title.is-title-expanded .tq-native-toolbar,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2 .tq-card-title.is-title-expanded .tq-wb-item-head{
  display:flex!important;
}

/* v6.29.2 — pizarra: edición estable, barra de formato ordenada, chrome limpio y timer oscuro */
#pedro-ai-app.pedro-whiteboard-mode .tq-native-toolbar-rich,
#pedro-ai-app.pedro-whiteboard-mode .tq-native-toolbar-title{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(118px,max-content))!important;
  align-items:start!important;
  justify-content:start!important;
  gap:8px!important;
  max-width:min(760px,92vw)!important;
  padding:10px!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,var(--bg),#ffffff)!important;
  border:1px solid rgba(15,23,42,.10)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72)!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-toolbar-title{
  grid-template-columns:repeat(auto-fit,minmax(120px,max-content))!important;
  max-width:min(430px,86vw)!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-toolgroup{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  gap:5px!important;
  flex-wrap:wrap!important;
  padding:18px 7px 7px!important;
  border-radius:14px!important;
  background:#fff!important;
  border:1px solid rgba(15,23,42,.10)!important;
  box-shadow:0 5px 14px rgba(15,23,42,.045)!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-toolgroup::before{
  content:attr(data-label)!important;
  position:absolute!important;
  left:8px!important;
  top:5px!important;
  font-size:9px!important;
  line-height:1!important;
  font-weight:1000!important;
  text-transform:uppercase!important;
  letter-spacing:.055em!important;
  color:var(--text-3)!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-toolbar-rich .tq-native-sep,
#pedro-ai-app.pedro-whiteboard-mode .tq-native-toolbar-title .tq-native-sep{
  display:none!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-toolbar-rich button,
#pedro-ai-app.pedro-whiteboard-mode .tq-native-toolbar-title button{
  min-width:30px!important;
  height:30px!important;
  padding:0 8px!important;
  border-radius:10px!important;
  font-size:11.5px!important;
  line-height:1!important;
  background:var(--bg)!important;
  border-color:rgba(15,23,42,.12)!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-toolbar-rich button:hover,
#pedro-ai-app.pedro-whiteboard-mode .tq-native-toolbar-title button:hover,
#pedro-ai-app.pedro-whiteboard-mode .tq-native-toolbar-rich button.is-active,
#pedro-ai-app.pedro-whiteboard-mode .tq-native-toolbar-title button.is-active{
  background:var(--text)!important;
  color:#fff!important;
  border-color:var(--text)!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-toolbar .tq-native-swatch{
  width:28px!important;
  min-width:28px!important;
  padding:0!important;
  background:var(--c)!important;
  color:transparent!important;
  border:2px solid #fff!important;
  box-shadow:0 0 0 1px rgba(15,23,42,.22)!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-editor h1,
#pedro-ai-app.pedro-whiteboard-mode .tq-native-editor h2,
#pedro-ai-app.pedro-whiteboard-mode .tq-native-editor p{
  margin:.12em 0!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-editor h1{font-size:1.75em!important;line-height:1.05!important;font-weight:1000!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-editor h2{font-size:1.35em!important;line-height:1.12!important;font-weight:950!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-editor:empty,
#pedro-ai-app.pedro-whiteboard-mode .tq-native-title-main:empty,
#pedro-ai-app.pedro-whiteboard-mode .tq-native-title-sub:empty,
#pedro-ai-app.pedro-whiteboard-mode .tq-native-note-editor:empty,
#pedro-ai-app.pedro-whiteboard-mode .tq-media-caption:empty{
  min-height:1.3em!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-note-card,
#pedro-ai-app.pedro-whiteboard-mode .tq-card-note,
#pedro-ai-app.pedro-whiteboard-mode .tq-native-note-card .tq-wb-item-body,
#pedro-ai-app.pedro-whiteboard-mode .tq-card-note .tq-wb-item-body,
#pedro-ai-app.pedro-whiteboard-mode .tq-native-note,
#pedro-ai-app.pedro-whiteboard-mode .tq-native-note-editor{
  background:#FEF3C7!important;
  background-image:none!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-note::after{display:none!important;}

#pedro-ai-app.pedro-whiteboard-mode .tq-card-traffic.is-card-collapsed:not(.is-selected),
#pedro-ai-app.pedro-whiteboard-mode .tq-card-image.is-card-collapsed:not(.is-selected),
#pedro-ai-app.pedro-whiteboard-mode .tq-card-youtube.is-card-collapsed:not(.is-selected){
  width:auto!important;
  min-width:28px!important;
  max-width:min(760px,94vw)!important;
  border-color:transparent!important;
  background:transparent!important;
  box-shadow:none!important;
  outline:0!important;
  overflow:visible!important;
  padding:0!important;
  cursor:grab!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-card-traffic.is-card-collapsed:not(.is-selected) .tq-wb-item-head,
#pedro-ai-app.pedro-whiteboard-mode .tq-card-image.is-card-collapsed:not(.is-selected) .tq-wb-item-head,
#pedro-ai-app.pedro-whiteboard-mode .tq-card-youtube.is-card-collapsed:not(.is-selected) .tq-wb-item-head{
  display:none!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-card-traffic.is-card-collapsed:not(.is-selected) .tq-wb-item-body,
#pedro-ai-app.pedro-whiteboard-mode .tq-card-image.is-card-collapsed:not(.is-selected) .tq-wb-item-body,
#pedro-ai-app.pedro-whiteboard-mode .tq-card-youtube.is-card-collapsed:not(.is-selected) .tq-wb-item-body{
  display:block!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  min-height:0!important;
  overflow:visible!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-card-traffic.is-card-collapsed:not(.is-selected) .tq-native-card,
#pedro-ai-app.pedro-whiteboard-mode .tq-card-image.is-card-collapsed:not(.is-selected) .tq-native-card,
#pedro-ai-app.pedro-whiteboard-mode .tq-card-youtube.is-card-collapsed:not(.is-selected) .tq-native-card{
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-card-image.is-card-collapsed:not(.is-selected) .tq-media-caption,
#pedro-ai-app.pedro-whiteboard-mode .tq-card-youtube.is-card-collapsed:not(.is-selected) .tq-media-caption{
  display:none!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-card-youtube.is-card-collapsed:not(.is-selected) iframe{
  pointer-events:none!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-card-image.is-card-collapsed:not(.is-selected) img,
#pedro-ai-app.pedro-whiteboard-mode .tq-card-youtube.is-card-collapsed:not(.is-selected) iframe{
  box-shadow:0 16px 34px rgba(15,23,42,.18)!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-card-traffic.is-card-expanded .tq-wb-item-head,
#pedro-ai-app.pedro-whiteboard-mode .tq-card-image.is-card-expanded .tq-wb-item-head,
#pedro-ai-app.pedro-whiteboard-mode .tq-card-youtube.is-card-expanded .tq-wb-item-head{
  display:flex!important;
}

#pedro-ai-app.pedro-whiteboard-mode .tq-card-timer,
#pedro-ai-app.pedro-whiteboard-mode .tq-native-timer-card,
#pedro-ai-app.pedro-whiteboard-mode .tq-card-timer .tq-wb-item-body,
#pedro-ai-app.pedro-whiteboard-mode .tq-native-timer-card .tq-wb-item-body,
#pedro-ai-app.pedro-whiteboard-mode .tq-native-timer{
  background:#050505!important;
  background-image:none!important;
  color:#fff!important;
  border-color:var(--text)!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-card-timer .tq-wb-item-head,
#pedro-ai-app.pedro-whiteboard-mode .tq-native-timer-card .tq-wb-item-head{
  background:#0b0b0b!important;
  color:#fff!important;
  border-bottom-color:var(--text)!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-timer .tq-timer-clock{
  color:#6C5CE7!important;
  text-shadow:0 0 18px rgba(108,92,231,.35)!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-timer .tq-timer-bar{background:#27272a!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-timer .tq-timer-actions button{
  background:var(--text)!important;
  color:#fff!important;
  border-color:#374151!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-timer .tq-timer-actions button:hover{
  background:#6C5CE7!important;
  border-color:#6C5CE7!important;
}

/* v6.29.3 — pizarra: semáforo real, barra de texto compacta, notas amarillas y revelado limpio */
#pedro-ai-app.pedro-whiteboard-mode .tq-native-toolbar-rich.tq-native-toolbar-compact{
  grid-template-columns:repeat(auto-fit,minmax(92px,max-content))!important;
  max-width:min(620px,90vw)!important;
  gap:6px!important;
  padding:8px!important;
  border-radius:18px!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-toolbar-rich.tq-native-toolbar-compact .tq-native-toolgroup{
  gap:4px!important;
  padding:16px 6px 6px!important;
  border-radius:14px!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-toolbar-rich.tq-native-toolbar-compact .tq-native-toolgroup::before{
  top:5px!important;
  left:7px!important;
  font-size:8.5px!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-toolbar-rich.tq-native-toolbar-compact button{
  min-width:28px!important;
  height:28px!important;
  padding:0 7px!important;
  border-radius:9px!important;
  font-size:11px!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-toolbar-rich.tq-native-toolbar-compact .tq-native-swatch{
  width:27px!important;
  min-width:27px!important;
  height:27px!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-card-rich-text.is-card-expanded,
#pedro-ai-app.pedro-whiteboard-mode .tq-card-rich-text.is-card-collapsed{
  max-width:min(680px,calc(100vw - 36px))!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-card-rich-text .tq-wb-item-body{
  overflow:visible!important;
}

#pedro-ai-app.pedro-whiteboard-mode .tq-native-note-card,
#pedro-ai-app.pedro-whiteboard-mode .tq-native-note-card .tq-wb-item-head,
#pedro-ai-app.pedro-whiteboard-mode .tq-card-note .tq-wb-item-head,
#pedro-ai-app.pedro-whiteboard-mode .tq-native-note-card .tq-wb-item-body,
#pedro-ai-app.pedro-whiteboard-mode .tq-card-note .tq-wb-item-body,
#pedro-ai-app.pedro-whiteboard-mode .tq-native-note,
#pedro-ai-app.pedro-whiteboard-mode .tq-native-note-editor{
  background:#FEF3C7!important;
  background-image:none!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-note-card .tq-wb-item-head,
#pedro-ai-app.pedro-whiteboard-mode .tq-card-note .tq-wb-item-head{
  border-bottom-color:rgba(245,158,11,.25)!important;
}

#pedro-ai-app.pedro-whiteboard-mode .tq-card-traffic.is-card-collapsed:not(.is-selected){
  width:92px!important;
  min-width:92px!important;
  max-width:92px!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-card-traffic.is-card-collapsed:not(.is-selected) .tq-native-card.tq-native-traffic,
#pedro-ai-app.pedro-whiteboard-mode .tq-card-traffic.is-card-collapsed:not(.is-selected) .tq-native-traffic{
  display:grid!important;
  gap:9px!important;
  justify-items:center!important;
  width:78px!important;
  min-width:78px!important;
  padding:12px 10px!important;
  margin:0!important;
  border-radius:34px!important;
  background:var(--text)!important;
  border:4px solid var(--text)!important;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.05),0 14px 28px rgba(15,23,42,.24)!important;
  pointer-events:none!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-card-traffic.is-card-collapsed:not(.is-selected) .tq-native-traffic button{
  width:54px!important;
  height:54px!important;
  min-width:54px!important;
  border-radius:999px!important;
  padding:0!important;
  border:5px solid rgba(255,255,255,.12)!important;
  box-shadow:inset 0 8px 16px rgba(255,255,255,.20),inset 0 -10px 18px rgba(0,0,0,.26)!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-card-traffic.is-card-collapsed:not(.is-selected) .tq-native-traffic [data-native-traffic="red"]{background:#7f1d1d!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-card-traffic.is-card-collapsed:not(.is-selected) .tq-native-traffic [data-native-traffic="amber"]{background:#92400e!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-card-traffic.is-card-collapsed:not(.is-selected) .tq-native-traffic [data-native-traffic="green"]{background:#14532d!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-card-traffic.is-card-collapsed:not(.is-selected) .tq-native-traffic [data-native-traffic="red"].is-selected{background:#ef4444!important;box-shadow:0 0 24px rgba(239,68,68,.78),inset 0 8px 16px rgba(255,255,255,.28)!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-card-traffic.is-card-collapsed:not(.is-selected) .tq-native-traffic [data-native-traffic="amber"].is-selected{background:#f59e0b!important;box-shadow:0 0 24px rgba(245,158,11,.78),inset 0 8px 16px rgba(255,255,255,.28)!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-card-traffic.is-card-collapsed:not(.is-selected) .tq-native-traffic [data-native-traffic="green"].is-selected{background:#22c55e!important;box-shadow:0 0 24px rgba(34,197,94,.78),inset 0 8px 16px rgba(255,255,255,.28)!important;}

#pedro-ai-app.pedro-whiteboard-mode .tq-card-image.is-card-collapsed:not(.is-selected),
#pedro-ai-app.pedro-whiteboard-mode .tq-card-youtube.is-card-collapsed:not(.is-selected){
  cursor:grab!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-card-image.is-card-collapsed:not(.is-selected) .tq-native-card,
#pedro-ai-app.pedro-whiteboard-mode .tq-card-youtube.is-card-collapsed:not(.is-selected) .tq-native-card{
  pointer-events:none!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-layer-box,
#pedro-ai-app.pedro-whiteboard-mode [data-wb-layer],
#pedro-ai-app.pedro-whiteboard-mode [data-wb-layer-action]{
  display:none!important;
}

/* v6.29.4 — campo de texto reconstruido: compacto, horizontal y siempre visible */
#pedro-ai-app.pedro-whiteboard-mode .tq-card-rich-text,
#pedro-ai-app.pedro-whiteboard-mode .tq-card-rich-text.is-card-expanded,
#pedro-ai-app.pedro-whiteboard-mode .tq-card-rich-text.is-card-collapsed{
  background:#fff!important;
  border-color:#93c5fd!important;
  max-width:min(680px,calc(100vw - 36px))!important;
  box-shadow:0 18px 42px rgba(15,23,42,.12)!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-card-rich-text .tq-wb-item-head{
  display:flex!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-card-rich-text .tq-wb-item-body{
  display:block!important;
  padding:10px!important;
  background:#fff!important;
  overflow:visible!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-text{
  gap:8px!important;
  width:100%!important;
  max-width:100%!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-toolbar-rich.tq-native-textbar{
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:6px!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior-x:contain!important;
  padding:6px!important;
  border-radius:16px!important;
  background:var(--bg)!important;
  border:1px solid rgba(15,23,42,.10)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7)!important;
  scrollbar-width:thin!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-toolbar-rich.tq-native-textbar .tq-native-toolgroup{
  position:relative!important;
  display:flex!important;
  flex:0 0 auto!important;
  align-items:center!important;
  gap:4px!important;
  flex-wrap:nowrap!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-toolbar-rich.tq-native-textbar .tq-native-toolgroup::before{
  display:none!important;
  content:''!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-toolbar-rich.tq-native-textbar .tq-native-toolgroup + .tq-native-toolgroup{
  padding-left:7px!important;
  margin-left:2px!important;
  border-left:1px solid rgba(15,23,42,.12)!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-toolbar-rich.tq-native-textbar button{
  flex:0 0 auto!important;
  min-width:30px!important;
  width:auto!important;
  height:30px!important;
  padding:0 8px!important;
  border-radius:10px!important;
  font-size:12px!important;
  font-weight:1000!important;
  line-height:1!important;
  background:#fff!important;
  color:var(--text)!important;
  border:1px solid rgba(15,23,42,.12)!important;
  box-shadow:0 3px 8px rgba(15,23,42,.04)!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-toolbar-rich.tq-native-textbar button:hover,
#pedro-ai-app.pedro-whiteboard-mode .tq-native-toolbar-rich.tq-native-textbar button.is-active{
  background:var(--text)!important;
  color:#fff!important;
  border-color:var(--text)!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-toolbar-rich.tq-native-textbar .tq-native-swatch{
  width:28px!important;
  min-width:28px!important;
  height:28px!important;
  padding:0!important;
  border:2px solid #fff!important;
  border-radius:999px!important;
  background:var(--c)!important;
  color:transparent!important;
  box-shadow:0 0 0 1px rgba(15,23,42,.24)!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-toolbar-rich.tq-native-textbar .tq-native-swatch:hover,
#pedro-ai-app.pedro-whiteboard-mode .tq-native-toolbar-rich.tq-native-textbar .tq-native-swatch.is-active{
  background:var(--c)!important;
  color:transparent!important;
  box-shadow:0 0 0 2px var(--text)!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-toolbar-rich.tq-native-textbar .tq-native-highlight{
  background:#FEF3C7!important;
  color:#92400e!important;
  border-color:#F59E0B!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-text-editor{
  min-height:132px!important;
  padding:12px!important;
  border-radius:15px!important;
  background:#fff!important;
  border:1px solid rgba(15,23,42,.10)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75)!important;
  font-size:24px!important;
  font-weight:850!important;
  line-height:1.35!important;
  white-space:pre-wrap!important;
  overflow-wrap:anywhere!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-native-text-editor:focus{
  outline:2px solid rgba(37,99,235,.18)!important;
  outline-offset:2px!important;
  box-shadow:0 0 0 3px rgba(37,99,235,.10), inset 0 1px 0 rgba(255,255,255,.75)!important;
}
@media (max-width:720px){
  #pedro-ai-app.pedro-whiteboard-mode .tq-native-toolbar-rich.tq-native-textbar{padding:5px!important;gap:5px!important;}
  #pedro-ai-app.pedro-whiteboard-mode .tq-native-toolbar-rich.tq-native-textbar button{min-width:28px!important;height:28px!important;padding:0 7px!important;font-size:11px!important;}
  #pedro-ai-app.pedro-whiteboard-mode .tq-native-toolbar-rich.tq-native-textbar .tq-native-swatch{width:26px!important;min-width:26px!important;height:26px!important;}
}


/* v6.29.6 — campo de texto eliminado y recreado desde cero */
#pedro-ai-app.pedro-whiteboard-mode .tq-fresh-text-item,
#pedro-ai-app.pedro-whiteboard-mode .tq-fresh-text-item.is-card-expanded,
#pedro-ai-app.pedro-whiteboard-mode .tq-fresh-text-item.is-card-collapsed,
#pedro-ai-app.pedro-whiteboard-mode .tq-card-rich-text,
#pedro-ai-app.pedro-whiteboard-mode .tq-card-rich-text.is-card-expanded,
#pedro-ai-app.pedro-whiteboard-mode .tq-card-rich-text.is-card-collapsed{
  width:580px!important;
  min-width:420px!important;
  max-width:min(620px,calc(100vw - 36px))!important;
  background:#ffffff!important;
  border:2px solid #93c5fd!important;
  border-radius:24px!important;
  box-shadow:0 18px 44px rgba(15,23,42,.13)!important;
  overflow:hidden!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-fresh-text-item .tq-wb-item-head,
#pedro-ai-app.pedro-whiteboard-mode .tq-card-rich-text .tq-wb-item-head{
  display:flex!important;
  background:#ffffff!important;
  border-bottom:1px solid rgba(15,23,42,.08)!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-fresh-text-item .tq-wb-item-body,
#pedro-ai-app.pedro-whiteboard-mode .tq-card-rich-text .tq-wb-item-body{
  display:block!important;
  padding:12px!important;
  background:#ffffff!important;
  overflow:hidden!important;
  min-width:0!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-fresh-text-card{
  width:100%!important;
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
  background:#ffffff!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-fresh-text-toolbar{
  width:100%!important;
  min-width:0!important;
  background:var(--bg)!important;
  border:1px solid rgba(15,23,42,.10)!important;
  border-radius:17px!important;
  padding:6px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75)!important;
  -webkit-user-select:none!important;
  user-select:none!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-fresh-text-scroll{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex-wrap:nowrap!important;
  gap:6px!important;
  width:100%!important;
  min-width:0!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior-x:contain!important;
  scrollbar-width:thin!important;
  padding-bottom:1px!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-fresh-text-scroll::-webkit-scrollbar{height:6px!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-fresh-text-scroll::-webkit-scrollbar-thumb{background:rgba(15,23,42,.18)!important;border-radius:999px!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-fresh-sep{
  flex:0 0 1px!important;
  width:1px!important;
  height:24px!important;
  background:rgba(15,23,42,.14)!important;
  margin:0 1px!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-fresh-btn,
#pedro-ai-app.pedro-whiteboard-mode .tq-fresh-mark{
  flex:0 0 auto!important;
  min-width:32px!important;
  height:32px!important;
  padding:0 9px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:11px!important;
  border:1px solid rgba(15,23,42,.13)!important;
  background:#ffffff!important;
  color:var(--text)!important;
  font-size:13px!important;
  font-weight:1000!important;
  line-height:1!important;
  cursor:pointer!important;
  box-shadow:0 3px 8px rgba(15,23,42,.04)!important;
  touch-action:manipulation!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-fresh-btn:hover,
#pedro-ai-app.pedro-whiteboard-mode .tq-fresh-btn.is-active,
#pedro-ai-app.pedro-whiteboard-mode .tq-fresh-mark:hover,
#pedro-ai-app.pedro-whiteboard-mode .tq-fresh-mark.is-active{
  background:var(--text)!important;
  color:#ffffff!important;
  border-color:var(--text)!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-fresh-swatch{
  flex:0 0 auto!important;
  width:31px!important;
  min-width:31px!important;
  height:31px!important;
  padding:0!important;
  border-radius:999px!important;
  border:2px solid #ffffff!important;
  background:var(--c)!important;
  color:transparent!important;
  box-shadow:0 0 0 1px rgba(15,23,42,.24)!important;
  cursor:pointer!important;
  touch-action:manipulation!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-fresh-swatch:hover,
#pedro-ai-app.pedro-whiteboard-mode .tq-fresh-swatch.is-active{
  box-shadow:0 0 0 2px var(--text)!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-fresh-mark-yellow{background:#FEF3C7!important;color:#92400E!important;border-color:#F59E0B!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-fresh-mark-blue{background:#DBEAFE!important;color:#1D4ED8!important;border-color:#60A5FA!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-fresh-mark-green{background:#DCFCE7!important;color:#166534!important;border-color:#86EFAC!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-fresh-text-editor{
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  height:220px!important;
  min-height:220px!important;
  max-height:220px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  resize:none!important;
  padding:14px!important;
  border-radius:17px!important;
  background:linear-gradient(0deg,var(--tq-text-highlight,transparent),var(--tq-text-highlight,transparent)),#ffffff!important;
  border:1px solid rgba(15,23,42,.11)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75)!important;
  color:var(--tq-text-color,var(--text))!important;
  font-family:var(--font-head)!important;
  font-size:24px!important;
  font-weight:750!important;
  line-height:1.35!important;
  white-space:pre-wrap!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  cursor:text!important;
  -webkit-user-select:text!important;
  user-select:text!important;
  touch-action:auto!important;
  caret-color:#6C5CE7!important;
}
#pedro-ai-app.pedro-whiteboard-mode textarea.tq-fresh-text-editor{
  border:1px solid rgba(15,23,42,.11)!important;
  appearance:none!important;
}
#pedro-ai-app.pedro-whiteboard-mode textarea.tq-fresh-text-editor::placeholder{
  color:var(--text-4)!important;
  font-weight:800!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-fresh-text-editor.is-bold{font-weight:950!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-fresh-text-editor.is-italic{font-style:italic!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-fresh-text-editor[data-text-size="3"]{font-size:18px!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-fresh-text-editor[data-text-size="4"]{font-size:24px!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-fresh-text-editor[data-text-size="5"]{font-size:32px!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-fresh-text-editor[data-text-size="6"]{font-size:42px!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-fresh-text-editor[data-text-align="center"]{text-align:center!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-fresh-text-editor[data-text-align="right"]{text-align:right!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-fresh-text-editor[data-text-align="left"]{text-align:left!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-fresh-text-editor:empty::before{
  content:attr(data-placeholder)!important;
  color:var(--text-4)!important;
  font-weight:800!important;
  pointer-events:none!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-fresh-text-editor.is-tq-editable-empty::before{
  content:attr(data-placeholder)!important;
  color:var(--text-4)!important;
  font-weight:800!important;
  pointer-events:none!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-fresh-text-toolbar button:focus{
  outline:none!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-fresh-text-editor:focus{
  outline:2px solid rgba(37,99,235,.22)!important;
  outline-offset:2px!important;
  box-shadow:0 0 0 3px rgba(37,99,235,.10), inset 0 1px 0 rgba(255,255,255,.75)!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-fresh-text-editor font[size="3"]{font-size:18px!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-fresh-text-editor font[size="4"]{font-size:24px!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-fresh-text-editor font[size="5"]{font-size:32px!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-fresh-text-editor font[size="6"]{font-size:42px!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-fresh-text-editor ul,
#pedro-ai-app.pedro-whiteboard-mode .tq-fresh-text-editor ol{
  margin:7px 0 7px 24px!important;
  padding:0!important;
}
@media (max-width:720px){
  #pedro-ai-app.pedro-whiteboard-mode .tq-fresh-text-item,
  #pedro-ai-app.pedro-whiteboard-mode .tq-card-rich-text{
    width:min(560px,calc(100vw - 24px))!important;
    min-width:min(320px,calc(100vw - 24px))!important;
  }
  #pedro-ai-app.pedro-whiteboard-mode .tq-fresh-text-editor{
    height:180px!important;
    min-height:180px!important;
    max-height:180px!important;
    font-size:21px!important;
  }
  #pedro-ai-app.pedro-whiteboard-mode .tq-fresh-btn,
  #pedro-ai-app.pedro-whiteboard-mode .tq-fresh-mark{height:30px!important;min-width:30px!important;font-size:12px!important;padding:0 8px!important;}
  #pedro-ai-app.pedro-whiteboard-mode .tq-fresh-swatch{width:29px!important;min-width:29px!important;height:29px!important;}
}

/* Caja de escritura: reemplazo simple del antiguo campo de texto */
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-dock-grid .tq-add-writing-box{
  background:linear-gradient(135deg,#fff,#ecfeff)!important;
  border-color:#67e8f9!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-card-writing-box,
#pedro-ai-app.pedro-whiteboard-mode .tq-card-writing-box.is-card-expanded,
#pedro-ai-app.pedro-whiteboard-mode .tq-card-writing-box.is-card-collapsed{
  width:500px!important;
  min-width:340px!important;
  max-width:min(560px,calc(100vw - 36px))!important;
  background:#ffffff!important;
  border:2px solid #67e8f9!important;
  border-radius:20px!important;
  box-shadow:0 16px 38px rgba(8,47,73,.12)!important;
  overflow:hidden!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-card-writing-box .tq-wb-item-head{
  display:flex!important;
  background:#f8feff!important;
  border-bottom:1px solid rgba(8,47,73,.10)!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-card-writing-box .tq-wb-item-body{
  display:block!important;
  padding:10px!important;
  background:#ffffff!important;
  overflow:hidden!important;
  min-width:0!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-write-box{
  display:grid!important;
  gap:8px!important;
  width:100%!important;
  min-width:0!important;
  padding:0!important;
  border:0!important;
  background:#ffffff!important;
  box-shadow:none!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-write-box-toolbar{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:5px!important;
  padding:2px 2px 4px!important;
  border-bottom:1px solid rgba(8,47,73,.08)!important;
  -webkit-user-select:none!important;
  user-select:none!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-write-box-btn,
#pedro-ai-app.pedro-whiteboard-mode .tq-write-box-swatch,
#pedro-ai-app.pedro-whiteboard-mode .tq-write-box-bg{
  display:inline-grid!important;
  place-items:center!important;
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  min-height:28px!important;
  padding:0!important;
  border-radius:9px!important;
  border:1px solid rgba(8,47,73,.16)!important;
  background:#fff!important;
  color:#0f172a!important;
  font-size:12px!important;
  font-weight:950!important;
  line-height:1!important;
  cursor:pointer!important;
  box-shadow:none!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-write-box-swatch::before,
#pedro-ai-app.pedro-whiteboard-mode .tq-write-box-bg::before{
  content:""!important;
  display:block!important;
  width:16px!important;
  height:16px!important;
  border-radius:999px!important;
  background:var(--c,#0f172a)!important;
  border:1px solid rgba(8,47,73,.18)!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-write-box-bg::before{
  border-radius:6px!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-write-box-btn.is-active,
#pedro-ai-app.pedro-whiteboard-mode .tq-write-box-swatch.is-active,
#pedro-ai-app.pedro-whiteboard-mode .tq-write-box-bg.is-active{
  border-color:#0891b2!important;
  box-shadow:0 0 0 2px rgba(8,145,178,.18)!important;
  background:#ecfeff!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-write-box-clear{
  width:auto!important;
  min-width:56px!important;
  padding:0 8px!important;
  font-size:11px!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-write-box-sep{
  width:1px!important;
  height:22px!important;
  background:rgba(8,47,73,.12)!important;
  margin:0 2px!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-write-box-input{
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  min-height:190px!important;
  max-height:none!important;
  resize:none!important;
  overflow:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  padding:16px!important;
  border-radius:16px!important;
  border:1px solid rgba(8,47,73,.14)!important;
  background:var(--tq-write-bg,#ffffff)!important;
  color:var(--tq-write-color,#0f172a)!important;
  font-family:var(--font-head)!important;
  font-size:25px!important;
  font-weight:780!important;
  line-height:1.36!important;
  white-space:pre-wrap!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  outline:none!important;
  cursor:text!important;
  caret-color:#0891b2!important;
  -webkit-user-select:text!important;
  user-select:text!important;
  touch-action:auto!important;
  appearance:none!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-write-box-input.is-bold{font-weight:950!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-write-box-input.is-italic{font-style:italic!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-write-box-input[data-write-size="S"]{font-size:20px!important;line-height:1.38!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-write-box-input[data-write-size="M"]{font-size:25px!important;line-height:1.36!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-write-box-input[data-write-size="L"]{font-size:31px!important;line-height:1.28!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-write-box-input::placeholder{
  color:var(--text-4)!important;
  font-weight:800!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-write-box-input:focus{
  outline:2px solid rgba(8,145,178,.22)!important;
  outline-offset:2px!important;
  box-shadow:0 0 0 3px rgba(8,145,178,.10)!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-write-box-foot{
  font-size:10px!important;
  font-weight:950!important;
  text-transform:uppercase!important;
  letter-spacing:.08em!important;
  color:var(--text-3)!important;
  text-align:right!important;
  pointer-events:none!important;
  -webkit-user-select:none!important;
  user-select:none!important;
}
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-size-s .tq-write-box-input{min-height:132px!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-size-m .tq-write-box-input{min-height:160px!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-size-l .tq-write-box-input{min-height:190px!important;}
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-size-xl .tq-write-box-input{min-height:240px!important;}
@media (max-width:720px){
  #pedro-ai-app.pedro-whiteboard-mode .tq-card-writing-box{
    width:min(520px,calc(100vw - 24px))!important;
    min-width:min(300px,calc(100vw - 24px))!important;
  }
  #pedro-ai-app.pedro-whiteboard-mode .tq-write-box-input{
    min-height:170px!important;
    font-size:22px!important;
  }
}


/* v6.29.26 — mobile app polish only: keeps desktop layout untouched */
@media (max-width: 680px) {
  html.pedro-ios-fullscreen-active,
  body.pedro-ios-fullscreen-active {
    overflow: hidden !important;
  }

  #pedro-ai-app.pedro-is-fullscreen,
  #pedro-ai-app[data-pedro-always-fullscreen="1"] {
    background:
      radial-gradient(circle at 50% 0%, rgba(108,92,231,.08), transparent 38%),
      linear-gradient(180deg, #fff8f5 0%, var(--bg) 100%) !important;
  }

  #pedro-ai-app .pedro-wow-layout {
    height: 100svh !important;
    min-height: 100svh !important;
    padding: 0 !important;
    gap: 0 !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
    overflow: hidden !important;
  }

  #pedro-ai-app .pedro-wow-main {
    height: 100% !important;
    min-height: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #pedro-ai-app .pedro-wow-topbar {
    flex: 0 0 auto !important;
    min-height: 56px !important;
    padding: calc(8px + env(safe-area-inset-top)) 8px 8px !important;
    gap: 6px !important;
    background:
      linear-gradient(90deg, rgba(255,240,244,.94), rgba(239,246,255,.94)) !important;
    border-bottom: 1px solid rgba(15,23,42,.08) !important;
    box-shadow: 0 10px 30px rgba(15,23,42,.08) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    position: relative !important;
    z-index: 100 !important;
  }

  #pedro-ai-app .pedro-ai-header-right {
    gap: 6px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    justify-content: flex-end !important;
  }

  #pedro-ai-app .pedro-hamburger {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.92) !important;
    border: 1px solid rgba(15,23,42,.08) !important;
    box-shadow: 0 8px 18px rgba(15,23,42,.08) !important;
  }

  #pedro-ai-app .pedro-lang-toggle {
    height: 34px !important;
    min-width: 42px !important;
    padding: 0 9px !important;
    border-radius: 13px !important;
    background: rgba(255,255,255,.90) !important;
    border: 1px solid rgba(15,23,42,.08) !important;
    color: var(--text) !important;
    font-size: 11px !important;
    font-weight: 1000 !important;
    letter-spacing: .14em !important;
  }

  #pedro-ai-app .pedro-ai-status-badge {
    height: 34px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
  }

  #pedro-ai-app .pedro-ai-header-right form {
    margin: 0 !important;
    flex: 0 0 auto !important;
  }

  #pedro-ai-app .pedro-ai-header-right form button[type="submit"] {
    height: 34px !important;
    padding: 0 10px !important;
    border-radius: 14px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    background: rgba(255,255,255,.88) !important;
    border: 1px solid rgba(15,23,42,.08) !important;
    box-shadow: none !important;
  }

  #pedro-ai-app .pedro-wow-workspace {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow: hidden !important;
  }

  #pedro-ai-app .pedro-ai-panels {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #pedro-ai-app .pedro-ai-panel.active {
    height: 100% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-padding-top: 18px !important;
  }

  #pedro-ai-app .pedro-wow-panel-stage {
    min-height: auto !important;
    padding: 12px 12px calc(24px + env(safe-area-inset-bottom)) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #pedro-ai-app .pedro-wow-sidebar {
    width: min(312px, 86vw) !important;
    max-width: 86vw !important;
    padding: calc(16px + env(safe-area-inset-top)) 12px calc(16px + env(safe-area-inset-bottom)) !important;
    border-radius: 0 22px 22px 0 !important;
    box-shadow: 18px 0 50px rgba(15,23,42,.24) !important;
  }

  #pedro-ai-app .pedro-wow-brand {
    margin-bottom: 4px !important;
  }

  #pedro-ai-app .pedro-wow-nav-item.pedro-ai-tab,
  #pedro-ai-app button.pedro-wow-nav-item {
    min-height: 50px !important;
    padding: 10px 12px !important;
    border-radius: 15px !important;
  }

  #pedro-ai-app .pedro-wow-nav-icon {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
  }
}

@media (max-width: 390px) {
  #pedro-ai-app .pedro-wow-topbar {
    padding-left: 6px !important;
    padding-right: 6px !important;
    gap: 5px !important;
  }

  #pedro-ai-app .pedro-ai-header-right {
    gap: 5px !important;
  }

  #pedro-ai-app .pedro-hamburger {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }

  #pedro-ai-app .pedro-lang-toggle {
    min-width: 38px !important;
    padding: 0 7px !important;
  }

  #pedro-ai-app .pedro-ai-status-badge {
    padding: 0 8px !important;
    font-size: 11.5px !important;
  }

  #pedro-ai-app .pedro-ai-header-right form button[type="submit"] {
    padding: 0 8px !important;
    font-size: 11.5px !important;
  }

  #pedro-ai-app .pedro-wow-panel-stage {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* v6.29.33 — Teeqo mascot avatar in chat (replaces 🦊 emoji).
   Avatar is 34px. Mascot artwork uses real pixel dimensions scaled from
   the big mascot (92x86 face → 26x24 face, ratio ≈ 0.28). No transform tricks. */

#pedro-ai-app .pedro-msg-avatar.pedro-msg-avatar-teeqo {
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    padding: 0 !important;
    font-size: 0 !important;
}

#pedro-ai-app .pedro-msg-avatar-teeqo .pedro-msg-teeqo {
    position: relative;
    width: 26px;
    height: 24px;
    margin: 0;
    padding: 0;
    filter: drop-shadow(0 2px 4px rgba(15,23,42,.18));
}

#pedro-ai-app .pedro-msg-avatar-teeqo .pedro-msg-teeqo-ear {
    position: absolute;
    top: 0;
    width: 10px;
    height: 11px;
    background: #6C5CE7;
    border-radius: 3px 5px 2px 5px;
}

#pedro-ai-app .pedro-msg-avatar-teeqo .pedro-msg-teeqo-ear-left {
    left: 1px;
    transform: rotate(-18deg);
}

#pedro-ai-app .pedro-msg-avatar-teeqo .pedro-msg-teeqo-ear-right {
    right: 1px;
    transform: rotate(18deg) scaleX(-1);
}

#pedro-ai-app .pedro-msg-avatar-teeqo .pedro-msg-teeqo-face {
    position: absolute;
    left: 2px;
    right: 2px;
    bottom: 0;
    height: 19px;
    border-radius: 9px 9px 8px 8px;
    background: linear-gradient(180deg, #ff5d39, #6C5CE7);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}

#pedro-ai-app .pedro-msg-avatar-teeqo .pedro-msg-teeqo-face i {
    position: absolute;
    top: 7px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 -1px 0 rgba(15,23,42,.18);
}

#pedro-ai-app .pedro-msg-avatar-teeqo .pedro-msg-teeqo-face i:first-child {
    left: 6px;
}

#pedro-ai-app .pedro-msg-avatar-teeqo .pedro-msg-teeqo-face i:nth-child(2) {
    right: 6px;
}

#pedro-ai-app .pedro-msg-avatar-teeqo .pedro-msg-teeqo-face b {
    position: absolute;
    left: 50%;
    bottom: 5px;
    width: 7px;
    height: 3px;
    border-radius: 0 0 999px 999px;
    border-bottom: 1.5px solid rgba(255,255,255,.88);
    transform: translateX(-50%);
}

/* v6.29.34 — Whiteboard quick-chat: contained height with scroll inside.
   The widget previously had max-height on the log only, but the card itself
   could keep growing because chips + form add fixed rows. Now we cap the
   whole card to a sensible max and let only the log scroll. */

#pedro-ai-app .tq-wb-v2 .tq-card-quick-chat {
    max-height: 440px !important;
    display: flex !important;
    flex-direction: column !important;
}

#pedro-ai-app .tq-wb-v2 .tq-card-quick-chat .tq-wb-item-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

#pedro-ai-app .tq-wb-v2 .tq-card-quick-chat .tq-wb-chat-widget {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
}

/* The log takes all remaining space and is the only scrollable region. */
#pedro-ai-app .tq-wb-v2 .tq-card-quick-chat .tq-wb-chat-log {
    flex: 1 1 auto !important;
    min-height: 80px !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
}

/* Chips and form remain at fixed sizes — no growth. */
#pedro-ai-app .tq-wb-v2 .tq-card-quick-chat .tq-wb-chat-chips {
    flex: 0 0 auto !important;
}

#pedro-ai-app .tq-wb-v2 .tq-card-quick-chat .tq-wb-chat-form {
    flex: 0 0 auto !important;
}

/* Cap the textarea so a long question doesn't push the form. */
#pedro-ai-app .tq-wb-v2 .tq-card-quick-chat .tq-wb-chat-form textarea {
    max-height: 80px !important;
}

/* On small whiteboards, shrink the card max-height proportionally. */
@media (max-height: 720px) {
    #pedro-ai-app .tq-wb-v2 .tq-card-quick-chat {
        max-height: min(380px, 60vh) !important;
    }
}

@media (max-height: 560px) {
    #pedro-ai-app .tq-wb-v2 .tq-card-quick-chat {
        max-height: min(320px, 70vh) !important;
    }
}

/* v6.29.34 — Worksheet mascot greeting + visual upgrades.
   The mascot reuses the same artwork system as the chat avatar but at a
   larger size. A tiny speech bubble shows "¡Hola!" to greet the student. */

/* Name row redesigned as a friendly greeting strip with mascot on the left. */
#pedro-ai-app .tq-worksheet-name-row-mascot {
    display: block !important;
    margin: 0 0 22px !important;
    padding: 16px 18px !important;
    border: 1.5px dashed #fed7aa !important;
    border-radius: 22px !important;
    background: linear-gradient(135deg, #fff7ed 0%, #fff 70%) !important;
    box-shadow: 0 8px 22px rgba(234, 88, 12, 0.06) !important;
    grid-template-columns: none !important;
}

#pedro-ai-app .tq-worksheet-name-greet {
    display: grid !important;
    grid-template-columns: 88px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 16px !important;
}

#pedro-ai-app .tq-worksheet-name-mascot {
    position: relative;
    width: 80px;
    height: 80px;
    display: grid;
    place-items: center;
}

/* v6.99.0 — Aquí vivía un muñeco dibujado con CSS: dos orejas, una cara
   morada, dos ojos y una sonrisa. Bonito, pero genérico: en la cabecera de
   una ficha que el alumno se lleva a casa, lo que tiene que verse es de
   quién es la ficha. Ahora va el logo de Teeqo.

   print-color-adjust: la cabecera se imprime, y sin esto el navegador se
   ahorra la tinta del logo y sale un hueco. */
#pedro-ai-app .tq-ws-teeqo-logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 6px 14px rgba(15, 23, 42, 0.15));
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* El recuadro del logo no recorta. */
#pedro-ai-app .tq-worksheet-name-mascot {
    overflow: visible !important;
}

/* --- NAME FIELDS: stack with adequate space, never overflow --- */
#pedro-ai-app .tq-worksheet-name-row-mascot {
    padding: 14px 16px !important;
    overflow: hidden !important;
}

#pedro-ai-app .tq-worksheet-name-greet {
    grid-template-columns: 84px minmax(0, 1fr) !important;
    gap: 14px !important;
}

#pedro-ai-app .tq-worksheet-name-fields {
    display: grid !important;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 6px 12px !important;
    font-size: 13px !important;
    min-width: 0 !important;
}

#pedro-ai-app .tq-worksheet-name-fields > div {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}

#pedro-ai-app .tq-worksheet-name-fields .tq-answer-line {
    flex: 1;
    min-width: 40px;
    max-width: 100%;
}

@media (max-width: 720px) {
    #pedro-ai-app .tq-worksheet-name-fields {
        grid-template-columns: 1fr !important;
    }
}

/* --- WORD BANK: redesigned as pill chips with clear separation --- */
#pedro-ai-app .tq-visual-word-bank {
    margin: 6px 0 14px !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #fef3c7, #fff) !important;
    border: 1.5px solid #fde68a !important;
}

#pedro-ai-app .tq-visual-word-bank > strong {
    display: block !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: #92400e !important;
    margin-bottom: 8px !important;
}

#pedro-ai-app .tq-visual-word-bank > div {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px 8px !important;
}

#pedro-ai-app .tq-visual-word-bank > div > span {
    display: inline-flex !important;
    align-items: center !important;
    padding: 5px 12px !important;
    background: #fff !important;
    border: 1.5px solid #fbbf24 !important;
    border-radius: 999px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #78350f !important;
    line-height: 1.3 !important;
}

/* --- VISUAL LIST: more compact when items are short --- */
#pedro-ai-app .tq-visual-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 6px 0 8px !important;
    display: grid !important;
    gap: 5px !important;
}

#pedro-ai-app .tq-visual-list li {
    padding: 8px 12px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    background: #fbfdff !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    line-height: 1.4 !important;
    font-size: 13px !important;
}

#pedro-ai-app .tq-visual-list li .tq-emoji-tag {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fef3c7;
    border-radius: 50%;
    font-size: 13px;
}

/* --- INSTRUCTIONS: visually distinct from the rest --- */
#pedro-ai-app .tq-visual-instruction {
    margin: 0 0 10px !important;
    padding: 8px 12px !important;
    background: #eff6ff !important;
    border-left: 3px solid #3b82f6 !important;
    border-radius: 0 8px 8px 0 !important;
    color: #1e3a8a !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
}

/* --- SPECIAL BLOCKS (extension + teacher overview) --- */
#pedro-ai-app .tq-worksheet-special-block {
    margin: 18px 0 !important;
    padding: 14px 16px !important;
    border-radius: 16px !important;
    position: relative !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
}

#pedro-ai-app .tq-worksheet-special-head {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
}

#pedro-ai-app .tq-worksheet-special-icon {
    font-size: 18px !important;
    line-height: 1 !important;
}

#pedro-ai-app .tq-worksheet-special-label {
    font-size: 11px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
}

#pedro-ai-app .tq-worksheet-special-body {
    font-size: 13px !important;
    line-height: 1.55 !important;
    color: var(--text) !important;
}

#pedro-ai-app .tq-worksheet-special-body p {
    margin: 0 0 6px !important;
}

#pedro-ai-app .tq-worksheet-special-body p:last-child {
    margin-bottom: 0 !important;
}

/* Extension — sky/violet accent */
#pedro-ai-app .tq-worksheet-extension {
    background: linear-gradient(135deg, #faf5ff, #fff) !important;
    border: 1.5px solid #e9d5ff !important;
}

#pedro-ai-app .tq-worksheet-extension .tq-worksheet-special-label {
    color: #6b21a8 !important;
}

/* Teacher overview — green accent */
#pedro-ai-app .tq-worksheet-teacher-overview {
    background: linear-gradient(135deg, #f0fdf4, #fff) !important;
    border: 1.5px dashed #86efac !important;
}

#pedro-ai-app .tq-worksheet-teacher-overview .tq-worksheet-special-label {
    color: #15803d !important;
}

/* --- SECTION HEADERS: cleaner, less plasticky --- */
#pedro-ai-app .tq-perfect-worksheet .p-section-head {
    padding: 11px 14px !important;
    gap: 10px !important;
}

#pedro-ai-app .tq-perfect-worksheet .p-section-head-text {
    font-size: 13.5px !important;
    font-weight: 900 !important;
    color: var(--text) !important;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Remove the small triangle (▸) that was breaking display */
#pedro-ai-app .tq-perfect-worksheet .p-section-head-icon {
    font-size: 16px !important;
    line-height: 1 !important;
    flex: 0 0 auto;
}

/* --- PAGINATION: prevent ugly fragmentation --- */
@media print {
    .tq-perfect-worksheet .p-section,
    .tq-perfect-worksheet .tq-visual-section,
    .tq-worksheet-special-block,
    .tq-worksheet-qr-strip,
    .tq-visual-word-bank {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    .tq-worksheet-name-row-mascot {
        break-after: avoid !important;
        page-break-after: avoid !important;
    }

    /* Compact mode for print: less white space */
    .tq-perfect-worksheet .p-section {
        margin-bottom: 10px !important;
    }

    .tq-visual-list li {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }

    .tq-visual-word-bank > div > span {
        padding: 3px 9px !important;
        font-size: 11.5px !important;
    }
}

/* v6.29.40 — Tongue twister with English-sound phonetic transcription.
   The Spanish line is the showpiece; the phonetic line is a secondary guide. */

#pedro-ai-app .tq-visual-tongue-twister {
    margin: 8px 0 12px;
    padding: 14px 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, #fef3f2 0%, #fff 70%);
    border: 1.5px solid #fecaca;
    box-shadow: 0 6px 18px rgba(220, 38, 38, 0.05);
    text-align: center;
    break-inside: avoid;
    page-break-inside: avoid;
}

#pedro-ai-app .tq-visual-tt-label {
    font-size: 10.5px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #5546D6;
    margin-bottom: 8px;
}

#pedro-ai-app .tq-visual-tt-text {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 19px;
    line-height: 1.4;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}

#pedro-ai-app .tq-visual-tt-phonetic-label {
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6b7280;
    margin-bottom: 4px;
}

#pedro-ai-app .tq-visual-tt-phonetic {
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--text);
    letter-spacing: 0.01em;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    display: inline-block;
    max-width: 100%;
}

/* v6.29.42 — Phonetic transcription under each tongue twister in the standalone
   Trabalenguas section. The Spanish line stays prominent; the phonetic is a guide. */

#pedro-ai-app .p-tw-item-spanish {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.5;
    margin-bottom: 10px;
    letter-spacing: -0.005em;
}

#pedro-ai-app .p-tw-item-phonetic-label {
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #6b7280;
    margin-bottom: 4px;
    margin-top: 6px;
}

#pedro-ai-app .p-tw-item-phonetic {
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text);
    letter-spacing: 0.005em;
    padding: 7px 11px;
    background: rgba(15, 23, 42, 0.04);
    border-radius: 8px;
    border-left: 3px solid #6C5CE7;
    display: block;
}

/* Print styles for trabalenguas section */
@media print {
    #pedro-ai-app .p-tw-item-spanish {
        font-size: 15px !important;
    }
    #pedro-ai-app .p-tw-item-phonetic {
        font-size: 11.5px !important;
        background: #f3f4f6 !important;
    }
}

/* v6.29.43 — Culture card: refresh button + actions row */
#pedro-ai-app .tq-home-culture-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

#pedro-ai-app #tq-home-culture-refresh {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,.3);
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, transform 0.15s;
    padding: 0;
    line-height: 1;
}

#pedro-ai-app #tq-home-culture-refresh:hover {
    background: rgba(255,255,255,.22);
    transform: rotate(180deg);
}

#pedro-ai-app .tq-home-culture-card.is-loading #tq-home-culture-refresh {
    opacity: .5;
    pointer-events: none;
    animation: tq-spin 1s linear infinite;
}

@keyframes tq-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ════════════════════════════════════════════════════════════
   TEEQO WOW PACK v6.30.0
   Paleta de comandos · loading premium · transiciones · micro-UX
   Todo namespaced y aditivo: no toca reglas existentes.
   ════════════════════════════════════════════════════════════ */

/* ── 1. Transición de paneles (entrada suave) ── */
@keyframes tqPanelIn {
  from { opacity: 0; transform: translateY(10px) scale(.995); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
#pedro-ai-app .pedro-ai-panel.active > .pedro-wow-panel-stage {
  animation: tqPanelIn .32s cubic-bezier(.22,.9,.3,1) both;
}
@media (prefers-reduced-motion: reduce) {
  #pedro-ai-app .pedro-ai-panel.active > .pedro-wow-panel-stage { animation: none; }
}

/* ── 2. Marca con shimmer sutil ── */
#pedro-ai-app .pedro-wow-brand-title {
  background: linear-gradient(100deg, #fff 30%, rgba(255,255,255,.55) 48%, #fff 62%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: tqBrandShimmer 7s ease-in-out infinite;
}
@keyframes tqBrandShimmer {
  0%, 72% { background-position: 120% 0; }
  88%     { background-position: -60% 0; }
  100%    { background-position: -60% 0; }
}
@media (prefers-reduced-motion: reduce) {
  #pedro-ai-app .pedro-wow-brand-title { animation: none; -webkit-text-fill-color: initial; background: none; }
}

/* ── 3. Sidebar: micro-interacciones ── */
#pedro-ai-app .pedro-wow-nav-item { position: relative; }
#pedro-ai-app .pedro-wow-nav-item::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%) scaleY(0);
  width: 3px; height: 62%; border-radius: 0 4px 4px 0;
  background: var(--red); transition: transform .22s cubic-bezier(.34,1.56,.64,1);
}
#pedro-ai-app .pedro-wow-nav-item.active::before { transform: translateY(-50%) scaleY(1); }
#pedro-ai-app .pedro-wow-nav-item .pedro-wow-nav-icon {
  transition: transform .22s cubic-bezier(.34,1.56,.64,1);
}
#pedro-ai-app .pedro-wow-nav-item:hover .pedro-wow-nav-icon { transform: translateX(2px) scale(1.18); }
#pedro-ai-app .pedro-wow-nav-item:active { transform: scale(.985); }

/* ── 4. Botones: presión táctil global ── */
#pedro-ai-app .pedro-btn:active,
#pedro-ai-app .pedro-btn-secondary:active,
#pedro-ai-app button.pedro-ai-tab:active { transform: scale(.97); }
#pedro-ai-app .pedro-btn, #pedro-ai-app .pedro-btn-secondary { transition: transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease; }

/* ── 5. Saludo dinámico en topbar ── */
#pedro-ai-app .tq-wow-greeting {
  font-family: var(--font-head); font-weight: 700; font-size: 13.5px;
  color: var(--text-2); margin-right: auto; padding-left: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  animation: tqPanelIn .5s .15s cubic-bezier(.22,.9,.3,1) both;
}
#pedro-ai-app .tq-wow-greeting b { color: var(--red); font-weight: 800; }
@media (max-width: 860px) { #pedro-ai-app .tq-wow-greeting { display: none; } }

/* ── 6. Botón ⌘K en topbar ── */
#pedro-ai-app .tq-cmdk-hint {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: 9px; padding: 6px 11px; cursor: pointer;
  font-family: var(--font); font-size: 12px; font-weight: 600; color: var(--text-3);
  transition: all .18s ease;
}
#pedro-ai-app .tq-cmdk-hint:hover { border-color: var(--red); color: var(--red); box-shadow: 0 0 0 3px var(--red-glow); }
#pedro-ai-app .tq-cmdk-hint kbd {
  font-family: var(--font); font-size: 10.5px; font-weight: 800;
  background: var(--surface-2); border: 1px solid var(--border-2); border-bottom-width: 2px;
  border-radius: 5px; padding: 1px 5px; color: var(--text-2);
}
/* v6.113.0 — En el móvil, una lupa; en el escritorio, el atajo.
   La lupa solo aparece cuando no hay sitio para el rótulo, así que en el
   escritorio el botón sigue siendo exactamente el de antes. */
#pedro-ai-app .tq-cmdk-hint-ico { display: none; line-height: 0; }
#pedro-ai-app .tq-cmdk-hint-ico svg { display: block; }

@media (max-width: 860px) {
  #pedro-ai-app .tq-cmdk-hint span.tq-cmdk-hint-label { display: none; }
  /* Y con el rótulo escondido, las teclas se quedaban solas: en un teléfono
     «⌘ K» son dos cuadraditos que no significan nada y que no se pueden
     pulsar. Fuera las teclas, dentro la lupa. */
  #pedro-ai-app .tq-cmdk-hint kbd { display: none; }
  #pedro-ai-app .tq-cmdk-hint-ico { display: block; }
  #pedro-ai-app .tq-cmdk-hint {
    width: 40px; height: 40px; padding: 0; gap: 0;
    justify-content: center; border-radius: 12px;
    color: var(--text-2);
  }
}
/* Un aparato táctil sin teclado no ve el atajo aunque le sobre pantalla:
   una tableta de 1024px sigue sin tener tecla de comando. */
@media (hover: none) and (pointer: coarse) {
  #pedro-ai-app .tq-cmdk-hint kbd { display: none; }
  #pedro-ai-app .tq-cmdk-hint-ico { display: block; }
}

/* ── 7. PALETA DE COMANDOS ── */
.tq-cmdk-backdrop {
  position: fixed; inset: 0; z-index: 999999;
  background: rgba(13,15,22,.45);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(60px, 14vh, 140px) 16px 16px;
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
.tq-cmdk-backdrop.open { opacity: 1; pointer-events: auto; }
.tq-cmdk {
  width: 100%; max-width: 580px;
  background: rgba(255,255,255,.97);
  border: 1px solid rgba(108,92,231,.14);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 24px 80px rgba(13,15,22,.35), 0 0 0 1px rgba(255,255,255,.6) inset;
  transform: translateY(-12px) scale(.98); transition: transform .22s cubic-bezier(.22,.9,.3,1);
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
}
.tq-cmdk-backdrop.open .tq-cmdk { transform: translateY(0) scale(1); }
.tq-cmdk-inputwrap {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid #EFF0F5;
}
.tq-cmdk-inputwrap .tq-cmdk-glyph { font-size: 17px; }
.tq-cmdk-input {
  flex: 1; border: none !important; outline: none !important; box-shadow: none !important;
  background: transparent !important; font-family: inherit;
  font-size: 16.5px; font-weight: 600; color: #111318; padding: 0 !important; margin: 0;
}
.tq-cmdk-input::placeholder { color: #B0B4CC; font-weight: 500; }
.tq-cmdk-esc {
  font-size: 10.5px; font-weight: 800; color: #7B7F96;
  background: #F3F4F8; border: 1px solid #D8DAE5; border-bottom-width: 2px;
  border-radius: 5px; padding: 2px 6px; flex-shrink: 0;
}
.tq-cmdk-list { max-height: min(46vh, 420px); overflow-y: auto; padding: 8px; }
.tq-cmdk-group {
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #B0B4CC; padding: 10px 12px 5px;
}
.tq-cmdk-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 12px; border: none; background: transparent; border-radius: 11px;
  cursor: pointer; text-align: left; font-family: inherit;
  transition: background .12s ease;
}
.tq-cmdk-item .tq-cmdk-ico {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
  background: #F3F4F8; transition: all .15s ease;
}
.tq-cmdk-item .tq-cmdk-label { font-size: 14px; font-weight: 700; color: #111318; }
.tq-cmdk-item .tq-cmdk-sub { font-size: 11.5px; font-weight: 500; color: #7B7F96; margin-top: 1px; }
.tq-cmdk-item .tq-cmdk-go {
  margin-left: auto; font-size: 12px; color: #B0B4CC; opacity: 0; transform: translateX(-4px);
  transition: all .15s ease;
}
.tq-cmdk-item.sel { background: #FFF1F1; }
.tq-cmdk-item.sel .tq-cmdk-ico { background: #6C5CE7; box-shadow: 0 4px 12px rgba(108,92,231,.30); }
.tq-cmdk-item.sel .tq-cmdk-label { color: #5546D6; }
.tq-cmdk-item.sel .tq-cmdk-go { opacity: 1; transform: translateX(0); color: #6C5CE7; }
.tq-cmdk-empty { text-align: center; padding: 34px 16px; color: #7B7F96; font-size: 13.5px; font-weight: 600; }
.tq-cmdk-empty .big { font-size: 30px; display: block; margin-bottom: 8px; }
.tq-cmdk-foot {
  display: flex; gap: 16px; padding: 10px 20px; border-top: 1px solid #EFF0F5;
  background: #FAFAFC; font-size: 11px; font-weight: 600; color: #7B7F96;
}
.tq-cmdk-foot kbd {
  font-size: 10px; font-weight: 800; background: #fff; border: 1px solid #D8DAE5;
  border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px; margin-right: 4px;
}
@media (max-width: 600px) { .tq-cmdk-foot { display: none; } }

/* ── 8. Loading overlay premium ── */
#pedro-ai-app .pedro-ai-loading-overlay { 
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
#pedro-ai-app .tq-load-tip {
  margin-top: 14px; max-width: 380px; text-align: center;
  font-size: 12.5px; font-weight: 600; color: var(--text-3);
  line-height: 1.55; padding: 0 20px; min-height: 38px;
  transition: opacity .35s ease; 
}
#pedro-ai-app .tq-load-tip.fading { opacity: 0; }
#pedro-ai-app .tq-load-tip .tq-load-tip-tag {
  display: block; font-size: 10px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--red); margin-bottom: 4px;
}
#pedro-ai-app .tq-load-bar {
  width: 200px; height: 3px; border-radius: 99px; overflow: hidden;
  background: var(--red-mid); margin-top: 16px; position: relative;
}
#pedro-ai-app .tq-load-bar::after {
  content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 45%;
  border-radius: 99px; background: linear-gradient(90deg, var(--red), #FF5A60);
  animation: tqLoadSlide 1.3s ease-in-out infinite;
}
@keyframes tqLoadSlide {
  0%   { transform: translateX(-110%); }
  60%  { transform: translateX(260%); }
  100% { transform: translateX(260%); }
}

/* ════════════════════════════════════════════════════════════
   TEEQO ESTRUCTURA v6.31.0
   Modal genérico · Centro de Resultados · Compartir/Editar
   ════════════════════════════════════════════════════════════ */

/* ── Modal genérico ── */
.tq-modal-backdrop {
  position: fixed; inset: 0; z-index: 999998;
  background: rgba(13,15,22,.5);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; transition: opacity .2s ease;
}
.tq-modal-backdrop.open { opacity: 1; }
.tq-modal {
  width: 100%; max-width: 560px; max-height: 86vh; overflow-y: auto;
  background: #fff; border-radius: 18px;
  box-shadow: 0 24px 80px rgba(13,15,22,.35);
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
  transform: translateY(14px) scale(.98); transition: transform .22s cubic-bezier(.22,.9,.3,1);
}
.tq-modal-backdrop.open .tq-modal { transform: translateY(0) scale(1); }
.tq-modal-head {
  display: flex; align-items: center; gap: 11px;
  padding: 18px 22px 14px; border-bottom: 1px solid #EFF0F5;
  position: sticky; top: 0; background: #fff; border-radius: 18px 18px 0 0;
}
.tq-modal-head .tq-modal-ico { font-size: 19px; }
.tq-modal-head h3 { margin: 0; font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 17px; color: #111318; flex: 1; }
.tq-modal-x {
  border: none; background: #F3F4F8; color: #7B7F96; width: 30px; height: 30px;
  border-radius: 9px; font-size: 17px; cursor: pointer; line-height: 1;
  transition: all .15s ease;
}
.tq-modal-x:hover { background: #FFE9EA; color: #6C5CE7; }
.tq-modal-body { padding: 18px 22px; }
.tq-modal-label {
  display: block; font-size: 11px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: #7B7F96; margin: 14px 0 6px;
}
.tq-modal-label:first-child { margin-top: 0; }
.tq-modal-input, .tq-modal-textarea {
  width: 100%; border: 1.5px solid #E2E4EC; border-radius: 11px;
  padding: 11px 14px; font-family: inherit; font-size: 14.5px; font-weight: 600;
  color: #111318; background: #FAFAFC; outline: none; box-sizing: border-box;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.tq-modal-input:focus, .tq-modal-textarea:focus {
  border-color: #6C5CE7; background: #fff; box-shadow: 0 0 0 3px rgba(108,92,231,.10);
}
.tq-modal-textarea { resize: vertical; min-height: 150px; line-height: 1.6; font-weight: 500; }
.tq-modal-json { font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; font-size: 12px; line-height: 1.55; white-space: pre; overflow-x: auto; background: #F8F9FB; }

/* v6.57.0 — Editor visual de recursos */
.tq-modal-body-scroll { max-height: min(64vh, 620px); overflow-y: auto; overscroll-behavior: contain; }
.tq-vp-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 4px; }
.tq-vp-toolbar-title { font-size: 13px; font-weight: 900; color: var(--text, #111318); }
.tq-vp-mode {
  border: 1px solid var(--border, #E8EAEF); background: var(--surface, #fff);
  border-radius: 999px; padding: 6px 12px; font-size: 11.5px; font-weight: 800;
  color: var(--text-2, #3D4054); cursor: pointer; transition: all .15s ease;
}
.tq-vp-mode:hover { border-color: #6C5CE7; color: #6C5CE7; }
.tq-vp-editor { display: grid; gap: 12px; margin-top: 10px; }
.tq-vp-field { display: grid; gap: 5px; }
.tq-vp-label { font-size: 11.5px; font-weight: 800; color: var(--text-3, #7B7F96); text-transform: uppercase; letter-spacing: .04em; }
.tq-vp-input, .tq-vp-textarea {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--border, #E8EAEF); border-radius: 12px;
  padding: 10px 12px; font-size: 13.5px; font-weight: 600;
  color: var(--text, #111318); background: var(--surface, #fff);
  font-family: inherit; transition: border-color .15s ease, box-shadow .15s ease;
}
.tq-vp-input:focus, .tq-vp-textarea:focus {
  outline: none; border-color: #6C5CE7; box-shadow: 0 0 0 3px rgba(108,92,231,.14);
}
.tq-vp-textarea { resize: vertical; line-height: 1.55; }
.tq-vp-check label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text, #111318); cursor: pointer; }
.tq-vp-group { border: 1px dashed var(--border-2, #D8DAE5); border-radius: 16px; padding: 12px; background: rgba(108,92,231,.025); }
.tq-vp-group-title { font-size: 12.5px; font-weight: 900; color: #5546D6; margin-bottom: 10px; text-transform: uppercase; letter-spacing: .05em; }
.tq-vp-card {
  border: 1px solid var(--border, #E8EAEF); border-radius: 14px;
  background: var(--surface, #fff); padding: 12px; margin-bottom: 10px;
  display: grid; gap: 10px;
}
.tq-vp-card-head { display: flex; align-items: center; justify-content: space-between; }
.tq-vp-card-head strong { font-size: 12.5px; font-weight: 900; color: var(--text, #111318); }
.tq-vp-del {
  border: 1px solid var(--border, #E8EAEF); background: var(--surface, #fff);
  border-radius: 9px; padding: 4px 9px; font-size: 12px; cursor: pointer; transition: all .15s ease;
}
.tq-vp-del:hover { border-color: #DC2626; background: #FEF2F2; }
.tq-vp-add {
  width: 100%; border: 1.5px dashed #6C5CE7; background: rgba(108,92,231,.05);
  color: #5546D6; border-radius: 12px; padding: 10px; font-size: 12.5px; font-weight: 800;
  cursor: pointer; transition: all .15s ease;
}
.tq-vp-add:hover { background: rgba(108,92,231,.10); }
.tq-modal-hint { font-size: 13px; line-height: 1.6; color: #7B7F96; margin: 0 0 6px; }
.tq-modal-foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 22px 18px; border-top: 1px solid #EFF0F5;
}
.tq-share-url { font-size: 13px !important; color: #5546D6 !important; cursor: pointer; }

/* ── Centro de Resultados ── */
#pedro-ai-app .tq-results-loading { text-align: center; padding: 52px 16px; color: var(--text-3); font-weight: 600; }
#pedro-ai-app .tq-results-empty {
  text-align: center; max-width: 440px; margin: 36px auto; padding: 40px 28px;
  background: var(--surface); border: 1.5px dashed var(--border-2); border-radius: 20px;
}
#pedro-ai-app .tq-results-empty-ico { font-size: 42px; margin-bottom: 10px; }
#pedro-ai-app .tq-results-empty h3 { font-family: var(--font-head); font-weight: 800; font-size: 19px; margin: 0 0 8px; }
#pedro-ai-app .tq-results-empty p { font-size: 13.5px; line-height: 1.65; color: var(--text-3); margin: 0 0 18px; }

#pedro-ai-app .tq-results-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0; }
#pedro-ai-app .tq-results-kpi {
  background: var(--surface); border: 1px solid var(--border-2); border-radius: 16px;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 2px;
}
#pedro-ai-app .tq-results-kpi .v { font-family: var(--font-head); font-weight: 800; font-size: 26px; color: var(--red); }
#pedro-ai-app .tq-results-kpi .k { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
@media (max-width: 640px) { #pedro-ai-app .tq-results-kpis { grid-template-columns: 1fr; } }

#pedro-ai-app .tq-results-list { display: flex; flex-direction: column; gap: 10px; }
#pedro-ai-app .tq-results-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border-2); border-radius: 15px;
  padding: 15px 18px; font-family: inherit;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
#pedro-ai-app .tq-results-row:hover { border-color: var(--red); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(108,92,231,.10); }
#pedro-ai-app .tq-results-row-title { display: block; font-family: var(--font-head); font-weight: 800; font-size: 15.5px; color: var(--text); }
#pedro-ai-app .tq-results-row-meta { display: block; font-size: 12px; font-weight: 600; color: var(--text-3); margin-top: 3px; }
#pedro-ai-app .tq-results-row-stats { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
#pedro-ai-app .tq-results-chip {
  font-size: 12px; font-weight: 800; padding: 5px 11px; border-radius: 99px;
  background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border-2);
}
#pedro-ai-app .tq-results-chip.good { background: #E8F8EE; color: #1B7E3F; border-color: #BFE8CD; }
#pedro-ai-app .tq-results-chip.mid  { background: #FFF6E5; color: #9A6B00; border-color: #F1DFAE; }
#pedro-ai-app .tq-results-chip.low  { background: #FFEDEE; color: #5546D6; border-color: #F6C6C8; }
#pedro-ai-app .tq-results-chip.dim  { opacity: .65; font-weight: 600; }
#pedro-ai-app .tq-results-arrow { color: var(--red); font-weight: 800; }

#pedro-ai-app .tq-results-detail-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
#pedro-ai-app .tq-results-detail-actions { display: flex; gap: 8px; }
#pedro-ai-app .tq-res-danger:hover { border-color: #DC2626 !important; color: #DC2626 !important; }
#pedro-ai-app .tq-res-danger.confirming { background: #DC2626 !important; color: #fff !important; border-color: #6C5CE7 !important; }
#pedro-ai-app .tq-results-detail-head h3 { font-family: var(--font-head); font-weight: 800; font-size: 22px; margin: 0 0 4px; }
#pedro-ai-app .tq-results-detail-head p { font-size: 13px; font-weight: 600; color: var(--text-3); margin: 0; }

#pedro-ai-app .tq-results-block {
  background: var(--surface); border: 1px solid var(--border-2); border-radius: 16px;
  padding: 18px 20px; margin-top: 14px;
}
#pedro-ai-app .tq-results-block h4 {
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3); margin: 0 0 14px;
}
#pedro-ai-app .tq-results-nodata { font-size: 13.5px; color: var(--text-3); font-weight: 600; margin: 0; }

#pedro-ai-app .tq-results-chart { display: flex; align-items: flex-end; gap: 12px; height: 130px; padding: 0 4px; }
#pedro-ai-app .tq-results-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; height: 100%; }
#pedro-ai-app .tq-results-bar {
  width: 100%; max-width: 56px; border-radius: 8px 8px 3px 3px;
  background: linear-gradient(180deg, #FF5A60, var(--red));
  box-shadow: 0 4px 12px rgba(108,92,231,.22);
  transition: height .5s cubic-bezier(.22,.9,.3,1);
}
#pedro-ai-app .tq-results-bar-n { font-size: 12px; font-weight: 800; color: var(--text-2); min-height: 16px; }
#pedro-ai-app .tq-results-bar-l { font-size: 10.5px; font-weight: 700; color: var(--text-3); }

#pedro-ai-app .tq-results-teams { display: flex; flex-direction: column; gap: 8px; }
#pedro-ai-app .tq-results-team {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 12px; padding: 11px 15px;
}
#pedro-ai-app .tq-results-team.first { border-color: rgba(108,92,231,.4); background: #FFF6F6; }
#pedro-ai-app .tq-results-team-name { font-weight: 800; font-size: 14px; flex: 1; }
#pedro-ai-app .tq-results-team-meta { font-size: 12px; font-weight: 600; color: var(--text-3); }
#pedro-ai-app .tq-results-team-pts { font-family: var(--font-head); font-weight: 800; color: var(--red); }

#pedro-ai-app .tq-results-table { display: flex; flex-direction: column; }
#pedro-ai-app .tq-results-tr {
  display: grid; grid-template-columns: 44px 1fr 84px 64px 76px;
  gap: 8px; align-items: center; padding: 10px 8px;
  border-bottom: 1px solid var(--border-2); font-size: 13.5px; font-weight: 600;
}
#pedro-ai-app .tq-results-tr:last-child { border-bottom: none; }
#pedro-ai-app .tq-results-tr.head {
  font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-3); border-bottom: 2px solid var(--border-2);
}
#pedro-ai-app .tq-results-tr.podium { background: linear-gradient(90deg, rgba(108,92,231,.05), transparent 60%); }
#pedro-ai-app .tq-results-tr .nick { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pedro-ai-app .tq-results-tr .nick .team { font-style: normal; font-size: 11px; color: var(--text-3); margin-left: 6px; }
#pedro-ai-app .tq-results-tr .pts { font-family: var(--font-head); font-weight: 800; color: var(--red); }
#pedro-ai-app .tq-results-tr .good { color: #1B7E3F; } 
#pedro-ai-app .tq-results-tr .mid { color: #9A6B00; }
#pedro-ai-app .tq-results-tr .low { color: #5546D6; }
@media (max-width: 560px) {
  #pedro-ai-app .tq-results-tr { grid-template-columns: 34px 1fr 64px 56px; }
  #pedro-ai-app .tq-results-tr span:nth-child(5) { display: none; }
}

/* ════════════════════════════════════════════════════════════
   TEEQO CLASSES v6.32.0 — Teeqo Intelligence · Fase 1
   ════════════════════════════════════════════════════════════ */
#pedro-ai-app .tq-cls-toolbar { display: flex; justify-content: flex-end; margin-bottom: 16px; }
#pedro-ai-app .tq-cls-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
#pedro-ai-app .tq-cls-card {
  text-align: left; cursor: pointer; font-family: inherit;
  background: var(--surface); border: 1px solid var(--border-2); border-radius: 18px;
  padding: 18px; display: flex; flex-direction: column; gap: 12px;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
#pedro-ai-app .tq-cls-card:hover { border-color: var(--red); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(108,92,231,.12); }
#pedro-ai-app .tq-cls-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
/* v6.113.0 — El nombre pasa a mandar: era 16px contra los 21 del código. */
#pedro-ai-app .tq-cls-name {
  font-family: var(--font-head); font-weight: 800; font-size: 19px;
  color: var(--text); line-height: 1.2; letter-spacing: -.02em;
}
#pedro-ai-app .tq-cls-level {
  font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  background: var(--red-light); color: var(--red); border-radius: 99px; padding: 4px 9px; flex-shrink: 0;
}
/* ══════════════════════════════════════════════════════════════════════
   v6.113.0 — LA TARJETA DE UNA CLASE

   Medido antes de tocar nada: el nombre de la clase iba a 16px y el código
   a 21px con .26em de espaciado. O sea, lo más grande de la tarjeta —con
   diferencia— era el código.

   Pero el código se usa UNA vez, el día que los alumnos se apuntan. El
   nombre se busca todos los días. Un profesor con cuatro clases estaba
   leyendo cuatro códigos de seis letras para encontrar «2º ESO».

   Se invierte: nombre grande, código de chapa.
   ══════════════════════════════════════════════════════════════════════ */
#pedro-ai-app .tq-cls-code-mini {
  font-family: var(--font-head); font-weight: 800; font-size: 12px; letter-spacing: .16em;
  color: var(--text-3); background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 7px; padding: 3px 8px; flex: 0 0 auto;
}
/* Las cifras, con su palabra al lado. «👤 15» hay que descifrarlo;
   «15 alumnos» se lee. El número pesa, la palabra acompaña. */
#pedro-ai-app .tq-cls-card-stats { display: flex; gap: 16px; align-items: baseline; }
#pedro-ai-app .tq-cls-stat { font-size: 12.5px; font-weight: 600; color: var(--text-3); }
#pedro-ai-app .tq-cls-stat b {
  font-family: var(--font-head); font-size: 20px; font-weight: 800;
  color: var(--text); margin-right: 4px; letter-spacing: -.02em;
}
#pedro-ai-app .tq-cls-card-pie {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border);
}
#pedro-ai-app .tq-cls-cuando {
  margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--text-3);
}
/* Una clase donde no ha entrado nadie no es un dato triste: es una tarea
   pendiente —repartir el código—, y se marca como tal. */
#pedro-ai-app .tq-cls-cuando.tq-cls-nadie { color: var(--amber); }

#pedro-ai-app .tq-cls-hero {
  display: flex; gap: 18px; align-items: stretch; flex-wrap: wrap;
  background: linear-gradient(135deg, #16161d 0%, #221019 100%);
  border-radius: 20px; padding: 24px; margin-bottom: 14px;
}
#pedro-ai-app .tq-cls-hero-info { flex: 1; min-width: 200px; }
/* v6.113.0 — Aquí pasaba lo mismo que en la lista: el nombre de la clase a
   23px y el código a 38px con .3em de espaciado. El código es de un solo uso
   —el día que se apuntan— y ocupaba el doble que el nombre de la clase en la
   que el profesor trabaja todos los días. Se invierte. */
#pedro-ai-app .tq-cls-hero-info h3 { font-family: var(--font-head); font-weight: 800; font-size: 30px; color: #fff; margin: 0 0 6px; letter-spacing: -.02em; }
#pedro-ai-app .tq-cls-hero-info p { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.55); margin: 0; }
#pedro-ai-app .tq-cls-code-box {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: rgba(255,255,255,.05); border: 1.5px dashed rgba(108,92,231,.5);
  border-radius: 16px; padding: 16px 26px;
}
#pedro-ai-app .tq-cls-code-label { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); }
#pedro-ai-app .tq-cls-code { font-family: var(--font-head); font-weight: 800; font-size: 25px; letter-spacing: .22em; color: #fff; text-indent: .22em; }
#pedro-ai-app .tq-cls-code-hint { font-size: 11px; font-weight: 600; color: #FF6B70; }

#pedro-ai-app .tq-cls-block-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
#pedro-ai-app .tq-cls-block-head h4 { margin: 0 !important; }
#pedro-ai-app .tq-cls-assign-list, #pedro-ai-app .tq-cls-members { display: flex; flex-direction: column; gap: 8px; }
#pedro-ai-app .tq-cls-assign-row, #pedro-ai-app .tq-cls-member {
  display: flex; align-items: center; gap: 11px;
  background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 12px; padding: 10px 14px;
}
#pedro-ai-app .tq-cls-assign-ico { font-size: 17px; }
#pedro-ai-app .tq-cls-assign-title { flex: 1; font-size: 13.5px; font-weight: 700; color: var(--text); }
#pedro-ai-app .tq-cls-assign-title i { font-style: normal; font-weight: 600; color: var(--text-3); font-size: 12px; }
#pedro-ai-app .tq-cls-assign-date, #pedro-ai-app .tq-cls-member-date { font-size: 11.5px; font-weight: 600; color: var(--text-3); }
#pedro-ai-app .tq-cls-member-alias { flex: 1; font-size: 13.5px; font-weight: 700; }
#pedro-ai-app .tq-cls-mini-x {
  width: 26px; height: 26px; border-radius: 8px; border: none; cursor: pointer;
  background: transparent; color: var(--text-3); font-size: 16px; line-height: 1;
  transition: all .15s ease;
}
#pedro-ai-app .tq-cls-mini-x:hover { background: #FFE9EA; color: var(--red); }

.tq-cls-pick {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  font-family: inherit; cursor: pointer; background: #FAFAFC; border: 1.5px solid #E2E4EC;
  border-radius: 12px; padding: 11px 14px; margin-bottom: 8px;
  transition: border-color .15s ease, background .15s ease;
}
.tq-cls-pick:hover { border-color: #6C5CE7; background: #fff; }
.tq-cls-pick.done { border-color: #1B7E3F; background: #E8F8EE; }
.tq-cls-pick-main { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.tq-cls-pick-main b { font-size: 13.5px; font-weight: 700; color: #111318; }
.tq-cls-pick-main i { font-style: normal; font-size: 11.5px; font-weight: 600; color: #7B7F96; }
.tq-cls-pick-go { font-size: 17px; font-weight: 800; color: #6C5CE7; }
.tq-cls-pick.done .tq-cls-pick-go { color: #1B7E3F; }
@media (max-width: 560px) {
  #pedro-ai-app .tq-cls-hero { flex-direction: column; }
  #pedro-ai-app .tq-cls-code { font-size: 22px; }
}

/* v6.32.1 — Chat avatar: Teeqo Intelligence logo replaces the legacy red mascot. */
#pedro-ai-app .pedro-msg-avatar.pedro-msg-avatar-teeqo,
#pedro-ai-app .tq-chat-reborn .pedro-msg-avatar.pedro-msg-avatar-teeqo,
#pedro-ai-app .pedro-typing .pedro-msg-avatar.pedro-msg-avatar-teeqo {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
  padding: 0 !important;
  font-size: 0 !important;
  background:
    radial-gradient(circle at 50% 46%, rgba(255,255,255,.98) 0 34%, rgba(204,232,255,.44) 54%, rgba(176,117,255,.34) 100%) !important;
  border: 1px solid rgba(192,170,255,.58) !important;
  color: transparent !important;
  box-shadow:
    0 8px 22px rgba(80,56,180,.18),
    0 0 20px rgba(151,117,255,.18),
    inset 0 0 0 1px rgba(255,255,255,.52) !important;
  animation: tqChatIntelligenceFloat 4.8s ease-in-out infinite !important;
}

#pedro-ai-app .pedro-msg-avatar.pedro-msg-avatar-teeqo::before,
#pedro-ai-app .tq-chat-reborn .pedro-msg-avatar.pedro-msg-avatar-teeqo::before,
#pedro-ai-app .pedro-typing .pedro-msg-avatar.pedro-msg-avatar-teeqo::before {
  content: "" !important;
  position: absolute !important;
  inset: -4px !important;
  border-radius: inherit !important;
  background: conic-gradient(from 0deg, rgba(126,218,255,.08), rgba(218,146,255,.42), rgba(126,218,255,.34), rgba(126,218,255,.08)) !important;
  filter: blur(7px) !important;
  opacity: .78 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  animation: tqChatIntelligenceAura 7s linear infinite !important;
}

#pedro-ai-app .pedro-msg-avatar-teeqo .pedro-msg-teeqo,
#pedro-ai-app .pedro-msg-avatar-teeqo .pedro-msg-teeqo-ear,
#pedro-ai-app .pedro-msg-avatar-teeqo .pedro-msg-teeqo-face {
  display: none !important;
}

#pedro-ai-app .pedro-msg-avatar-teeqo .pedro-msg-teeqo-logo {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  width: 38px !important;
  height: 38px !important;
  max-width: 92% !important;
  max-height: 92% !important;
  object-fit: contain !important;
  border-radius: 999px !important;
  filter: drop-shadow(0 5px 10px rgba(49,35,128,.20)) saturate(1.08) !important;
  animation: tqChatIntelligenceBreath 3.8s ease-in-out infinite !important;
}

@keyframes tqChatIntelligenceFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-2px) scale(1.02); }
}

@keyframes tqChatIntelligenceAura {
  0% { transform: rotate(0deg) scale(.96); opacity: .58; }
  50% { opacity: .92; }
  100% { transform: rotate(360deg) scale(.96); opacity: .58; }
}

@keyframes tqChatIntelligenceBreath {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

@media (max-width: 560px) {
  #pedro-ai-app .pedro-msg-avatar-teeqo .pedro-msg-teeqo-logo {
    width: 34px !important;
    height: 34px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #pedro-ai-app .pedro-msg-avatar.pedro-msg-avatar-teeqo,
  #pedro-ai-app .pedro-msg-avatar.pedro-msg-avatar-teeqo::before,
  #pedro-ai-app .pedro-msg-avatar-teeqo .pedro-msg-teeqo-logo {
    animation: none !important;
  }
}

/* ── PIZARRA v6.33.0: botón duplicar en items ── */
#pedro-ai-app .tq-wb-item-duplicate {
  width: 24px; height: 24px; border: none; border-radius: 7px; cursor: pointer;
  background: transparent; color: inherit; opacity: .55; font-size: 13px;
  line-height: 1; padding: 0; margin-right: 2px; flex-shrink: 0;
  transition: opacity .15s ease, background .15s ease, transform .12s ease;
}
#pedro-ai-app .tq-wb-item-duplicate:hover { opacity: 1; background: rgba(0,0,0,.08); }
#pedro-ai-app .tq-wb-item-duplicate:active { transform: scale(.9); }

/* ── COLLAB PADLET PRO v6.34.0 ── */
#pedro-ai-app .tq-collab-classchip {
  display: inline-block; margin-top: 5px; font-size: 10.5px; font-weight: 800;
  background: rgba(108,92,231,.10); color: var(--red); border: 1px solid rgba(108,92,231,.25);
  border-radius: 99px; padding: 3px 9px;
}
#pedro-ai-app .tq-collab-actions-pro button { font-size: 12px; }
#pedro-ai-app .tq-collab-moderate.is-on { background: var(--red) !important; color: #fff !important; border-color: var(--red) !important; }
#pedro-ai-app .tq-collab-close.confirming { background: #B3151A !important; color: #fff !important; }
#pedro-ai-app .tq-collab-count { font-size: 11.5px; font-weight: 800; color: var(--text-2); margin-top: 8px; }
#pedro-ai-app .is-collab-closed { opacity: .75; }
/* v6.183.0 — Una sesión cerrada tiene que NOTARSE: el QR y el link de la
   clase de la semana pasada ya no llevan a ninguna parte, y un alumno que
   escanee el de ayer escribe al vacío sin que nadie se entere. */
#pedro-ai-app .is-collab-closed .tq-collab-qr,
#pedro-ai-app .is-collab-closed .tq-collab-link,
#pedro-ai-app .is-collab-closed .tq-collab-code { opacity: .35; filter: grayscale(1); }
#pedro-ai-app .is-collab-closed .tq-collab-status { font-weight: 800; }
#pedro-ai-app .tq-collab-pull.tq-collab-reopen {
  background: #6C5CE7; color: #fff; border-color: #6C5CE7;
}
#pedro-ai-app .tq-collab-tray { margin-top: 10px; display: flex; flex-direction: column; gap: 7px; max-height: 220px; overflow-y: auto; }
#pedro-ai-app .tq-tray-empty { font-size: 11.5px; font-weight: 600; color: var(--text-3); padding: 8px 2px; }
#pedro-ai-app .tq-tray-note {
  border-radius: 11px; padding: 9px 11px; border: 1px solid rgba(0,0,0,.08);
  display: flex; flex-direction: column; gap: 3px;
}
#pedro-ai-app .tq-tray-note b { font-size: 12px; }
#pedro-ai-app .tq-tray-note span { font-size: 12px; line-height: 1.45; }
#pedro-ai-app .tq-tray-yellow { background:#FEF3C7; } #pedro-ai-app .tq-tray-red { background:#FEE2E2; }
#pedro-ai-app .tq-tray-blue { background:#DBEAFE; } #pedro-ai-app .tq-tray-green { background:#D1FAE5; }
#pedro-ai-app .tq-tray-purple { background:#EDE9FE; } #pedro-ai-app .tq-tray-orange { background:#FFEDD5; }
#pedro-ai-app .tq-tray-actions { display: flex; gap: 6px; margin-top: 4px; }
#pedro-ai-app .tq-tray-approve, #pedro-ai-app .tq-tray-reject {
  border: none; border-radius: 8px; padding: 5px 10px; font-size: 11px; font-weight: 800; cursor: pointer;
}
#pedro-ai-app .tq-tray-approve { background: #1B7E3F; color: #fff; flex: 1; }
#pedro-ai-app .tq-tray-reject { background: rgba(0,0,0,.10); color: #333; }
#pedro-ai-app .tq-collab-classpick .tq-wb-dialog-card { max-width: 380px; }
#pedro-ai-app .tq-collab-classpick-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
#pedro-ai-app .tq-classpick-item { width: 100%; text-align: left; }
#pedro-ai-app .tq-classpick-item small { opacity: .7; font-weight: 600; margin-left: 6px; }
#pedro-ai-app .tq-wb-item-star {
  width: 24px; height: 24px; border: none; border-radius: 7px; cursor: pointer;
  background: transparent; font-size: 12px; line-height: 1; padding: 0; margin-right: 2px;
  filter: grayscale(1); opacity: .5; transition: all .15s ease; flex-shrink: 0;
}
#pedro-ai-app .tq-wb-item-star:hover { opacity: .9; }
#pedro-ai-app .tq-wb-item.is-starred .tq-wb-item-star { filter: none; opacity: 1; transform: scale(1.12); }
#pedro-ai-app .tq-wb-item.is-starred { box-shadow: 0 0 0 2.5px #F6C344, 0 10px 26px rgba(246,195,68,.30) !important; }

/* ═══ JUEGOS v6.35.0: pasada visual nivel proyector ═══ */
#pedro-ai-app .tq-game-result-card { font-size: 17px; border-radius: 22px; overflow: hidden; }
#pedro-ai-app .tq-game-result-card h2, #pedro-ai-app .tq-game-result-card h3 { letter-spacing: -.01em; }

/* Marcador de equipos */
#pedro-ai-app .p-teams-board {
  display: flex; gap: 14px; padding: 14px 18px;
  background: linear-gradient(135deg, #16161d, #221019);
  border-radius: 0 0 18px 18px; margin-bottom: 14px;
}
#pedro-ai-app .p-team { flex: 1; display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.06); border-radius: 14px; padding: 10px 14px; }
#pedro-ai-app .p-team-a { border-left: 4px solid #6C5CE7; }
#pedro-ai-app .p-team-b { border-left: 4px solid #2563EB; }
#pedro-ai-app .p-team-name { color: #fff; font-weight: 800; font-size: 14px; outline: none; min-width: 70px; border-radius: 6px; padding: 2px 6px; }
#pedro-ai-app .p-team-name:focus { background: rgba(255,255,255,.12); }
#pedro-ai-app .p-team-score { margin-left: auto; font-family: var(--font-head); font-weight: 800; font-size: 34px; color: #fff; min-width: 48px; text-align: center; }
#pedro-ai-app .p-team-score.bump { animation: tqScoreBump .35s ease; }
@keyframes tqScoreBump { 0%{transform:scale(1)} 40%{transform:scale(1.35);color:#F6C344} 100%{transform:scale(1)} }
#pedro-ai-app .p-team-btns { display: flex; gap: 6px; }
#pedro-ai-app .p-team-btns button {
  width: 34px; height: 34px; border: none; border-radius: 10px; cursor: pointer;
  font-size: 18px; font-weight: 800; background: rgba(255,255,255,.14); color: #fff;
  transition: background .15s ease, transform .1s ease;
}
#pedro-ai-app .p-team-btns button:hover { background: rgba(255,255,255,.26); }
#pedro-ai-app .p-team-btns button:active { transform: scale(.88); }

/* Arcade: fichas grandes y vivas para proyector */
#pedro-ai-app .parcade-prompt { font-size: clamp(20px, 2.6vw, 30px); font-weight: 800; text-align: center; padding: 10px 16px 18px; }
#pedro-ai-app .parcade-chip {
  font-size: clamp(16px, 2vw, 22px); font-weight: 800; border-radius: 16px;
  padding: 16px 22px; border: 2.5px solid transparent; cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
  box-shadow: 0 6px 18px rgba(15,23,42,.10);
}
#pedro-ai-app .parcade-chip:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 14px 30px rgba(15,23,42,.16); }
#pedro-ai-app .parcade-chip.is-correct { border-color: #1B7E3F; background: #E8F8EE !important; animation: tqChipWin .5s ease; }
#pedro-ai-app .parcade-chip.is-wrong { border-color: #DC2626; background: #FFE9EA !important; animation: tqChipShake .4s ease; }
@keyframes tqChipWin { 0%{transform:scale(1)} 45%{transform:scale(1.12)} 100%{transform:scale(1)} }
@keyframes tqChipShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-7px)} 75%{transform:translateX(7px)} }

/* Pantalla de victoria con celebración CSS */
#pedro-ai-app .parcade-finish { text-align: center; padding: 44px 20px; position: relative; overflow: hidden; }
#pedro-ai-app .parcade-finish-emoji { font-size: 74px; animation: tqTrophy 1.1s ease infinite alternate; display: inline-block; }
@keyframes tqTrophy { from{transform:translateY(0) rotate(-4deg)} to{transform:translateY(-12px) rotate(4deg)} }
#pedro-ai-app .parcade-finish h2 { font-size: clamp(26px, 3vw, 38px); margin: 12px 0 6px; }
#pedro-ai-app .parcade-finish::before, #pedro-ai-app .parcade-finish::after {
  content: '🎉'; position: absolute; font-size: 30px; top: 16px;
  animation: tqConfetti 1.6s ease infinite;
}
#pedro-ai-app .parcade-finish::before { left: 14%; }
#pedro-ai-app .parcade-finish::after { right: 14%; animation-delay: .5s; }
@keyframes tqConfetti { 0%{transform:translateY(-8px) rotate(0)} 50%{transform:translateY(10px) rotate(24deg)} 100%{transform:translateY(-8px) rotate(0)} }

/* Memory: cartas con profundidad */
#pedro-ai-app .p-flip { transition: transform .15s ease, box-shadow .15s ease; border-radius: 16px; }
#pedro-ai-app .p-flip:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(15,23,42,.14); }
#pedro-ai-app .p-flip.is-matched, #pedro-ai-app .p-flip.matched { animation: tqChipWin .5s ease; }

/* Hangman: teclado táctil grande */
#pedro-ai-app .p-hm-key { min-width: 42px; min-height: 44px; font-size: 17px; font-weight: 800; border-radius: 12px; transition: all .12s ease; }
#pedro-ai-app .p-hm-key:hover:not(:disabled) { transform: translateY(-2px); }
#pedro-ai-app .p-hm-key:disabled { opacity: .35; }

/* V/F: botones de respuesta gigantes */
#pedro-ai-app .pvf-btn, #pedro-ai-app [class*="vf-btn"] { font-size: clamp(18px, 2.2vw, 26px) !important; padding: 18px 30px !important; border-radius: 18px !important; }

/* ── SEÑALES DE APRENDIZAJE v6.35.0 ── */
/* ═══════════════════════════════════════════════════════════════════
   v6.170.0 — EL PODIO DEL AULA EN EL PANEL DEL PROFESOR

   La fila lo dice todo de un vistazo: puesto, nombre, DE DÓNDE saca sus
   puntos, la barra y el total. Los iconitos son lo que contesta a «¿éste
   trabaja o marca?» sin que el profesor tenga que abrir nada.
   ═══════════════════════════════════════════════════════════════════ */
#pedro-ai-app .tq-pts-list { display: flex; flex-direction: column; gap: 6px; }
#pedro-ai-app .tq-pts-row { display: grid; grid-template-columns: 30px minmax(0,1.4fr) auto minmax(60px,1fr) 46px auto;
  align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--border-2); }
#pedro-ai-app .tq-pts-row.es-solo-marca { background: #FFFBEB; border-color: #FDE68A; }
#pedro-ai-app .tq-pts-pos { font-size: 15px; font-weight: 800; text-align: center; color: var(--text-3); }
#pedro-ai-app .tq-pts-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13.5px; font-weight: 750; color: var(--text-1); }
#pedro-ai-app .tq-pts-sincod { font-style: normal; font-size: 11px; font-weight: 700; color: #B45309;
  background: #FEF3C7; border-radius: 99px; padding: 1px 7px; margin-left: 5px; cursor: help; }
#pedro-ai-app .tq-pts-chips { display: flex; gap: 4px; flex-wrap: nowrap; }
#pedro-ai-app .tq-pts-chip { font-size: 11px; font-weight: 700; color: var(--text-2);
  background: var(--surface); border: 1px solid var(--border-2); border-radius: 99px; padding: 1px 7px; cursor: help; }
#pedro-ai-app .tq-pts-bar { height: 7px; border-radius: 99px; background: var(--surface); overflow: hidden;
  border: 1px solid var(--border-2); }
#pedro-ai-app .tq-pts-bar i { display: block; height: 100%; background: var(--red); border-radius: 99px; }
#pedro-ai-app .tq-pts-num { font-size: 13.5px; font-weight: 800; text-align: right;
  font-variant-numeric: tabular-nums; color: var(--text-1); }
#pedro-ai-app .tq-pts-olvidar { border: 1px solid var(--border-2); background: var(--surface); cursor: pointer;
  border-radius: 8px; width: 28px; height: 28px; font-size: 13px; line-height: 1; color: var(--text-3); }
#pedro-ai-app .tq-pts-olvidar:hover { border-color: #DC2626; color: #DC2626; background: #FEF2F2; }
#pedro-ai-app .tq-pts-olvidar:disabled { opacity: .5; cursor: progress; }
#pedro-ai-app .tq-pts-aviso { margin: 10px 0 0; font-size: 12.5px; font-weight: 650; line-height: 1.45;
  color: #92400E; background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 10px; padding: 9px 12px; }
#pedro-ai-app .tq-pts-baremo { margin: 9px 0 0; font-size: 11.5px; font-weight: 650; color: var(--text-3); }
@media (max-width: 720px) {
  #pedro-ai-app .tq-pts-row { grid-template-columns: 26px minmax(0,1fr) 44px auto; row-gap: 4px; }
  #pedro-ai-app .tq-pts-chips { grid-column: 2 / -1; }
  #pedro-ai-app .tq-pts-bar { display: none; }
}

#pedro-ai-app .tq-sig-kpis { display: flex; gap: 12px; margin-bottom: 12px; }
#pedro-ai-app .tq-sig-kpi { flex: 1; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 14px; padding: 12px 16px; display: flex; align-items: baseline; gap: 8px; }
#pedro-ai-app .tq-sig-kpi b { font-family: var(--font-head); font-size: 26px; font-weight: 800; color: var(--red); }
#pedro-ai-app .tq-sig-kpi span { font-size: 12px; font-weight: 700; color: var(--text-2); }
#pedro-ai-app .tq-sig-list { display: flex; flex-direction: column; gap: 8px; }
#pedro-ai-app .tq-sig-row { background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 12px; padding: 10px 14px; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; }
#pedro-ai-app .tq-sig-title { font-size: 13.5px; font-weight: 700; }
#pedro-ai-app .tq-sig-bits { font-size: 11.5px; font-weight: 700; color: var(--text-2); white-space: nowrap; }
#pedro-ai-app .tq-sig-bar { grid-column: 1 / -1; height: 6px; border-radius: 99px; background: var(--border-2); overflow: hidden; }
#pedro-ai-app .tq-sig-bar i { display: block; height: 100%; border-radius: 99px; background: #1B7E3F; transition: width .4s ease; }

/* ═══ TQ JUICE v6.36.0 ═══ */
#pedro-ai-app #pedro-game-result { position: relative; overflow: hidden; }
#pedro-ai-app .tq-juice-pop {
  position: absolute; transform: translate(-50%, 0); pointer-events: none; z-index: 60;
  font-family: var(--font-head); font-weight: 800; font-size: 22px; color: #1B7E3F;
  text-shadow: 0 2px 8px rgba(255,255,255,.8);
  animation: tqPopUp .9s ease forwards;
}
#pedro-ai-app .tq-juice-pop.lost { color: #6C5CE7; font-size: 15px; }
@keyframes tqPopUp { 0%{opacity:0;transform:translate(-50%,8px) scale(.7)} 18%{opacity:1;transform:translate(-50%,-6px) scale(1.15)} 100%{opacity:0;transform:translate(-50%,-54px) scale(1)} }
#pedro-ai-app .tq-juice-confetti {
  position: absolute; width: 9px; height: 9px; border-radius: 2px; pointer-events: none; z-index: 59;
  animation: tqConfettiFly 1s cubic-bezier(.2,.7,.4,1) forwards;
}
@keyframes tqConfettiFly {
  0% { transform: translate(0,0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 90px)) rotate(var(--rot)); opacity: 0; }
}
#pedro-ai-app .tq-juice-streak {
  position: absolute; top: 14px; right: 16px; z-index: 61; pointer-events: none;
  font-family: var(--font-head); font-weight: 800; font-size: 17px;
  background: linear-gradient(135deg, #16161d, #2a1212); color: #F6C344;
  border: 1.5px solid rgba(246,195,68,.45); border-radius: 99px; padding: 7px 14px;
  opacity: 0; transform: scale(.7); transition: opacity .2s ease, transform .2s ease;
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
}
#pedro-ai-app .tq-juice-streak.show { opacity: 1; transform: scale(1); }
#pedro-ai-app .tq-juice-streak.hot { border-color: #6C5CE7; color: #fff; background: linear-gradient(135deg, #6C5CE7, #8a0e12); }
#pedro-ai-app .tq-juice-streak.bump { animation: tqStreakBump .3s ease; }
@keyframes tqStreakBump { 40%{transform:scale(1.25) rotate(-3deg)} }
#pedro-ai-app .tq-juice-shake { animation: tqShake .35s ease; }
@keyframes tqShake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-9px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(4px)} }

/* ── v6.36.1: marcador de equipos responsive ── */
#pedro-ai-app .p-team { min-width: 0; }
#pedro-ai-app .p-team-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 38vw; }
@media (max-width: 680px) {
  #pedro-ai-app .p-teams-board { flex-direction: column; gap: 10px; padding: 12px 14px; }
  #pedro-ai-app .p-team { width: 100%; padding: 8px 12px; }
  #pedro-ai-app .p-team-score { font-size: 28px; min-width: 40px; }
  #pedro-ai-app .p-team-btns button { width: 40px; height: 40px; } /* dedos, no ratón */
  #pedro-ai-app .p-team-name { max-width: none; flex: 1; }
}

/* ═══ JUEGOS NUEVOS v6.37.0 ═══ */
/* Banner pedagógico de memoria */
#pedro-ai-app .p-mem-pair-banner {
  position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); z-index: 62;
  background: linear-gradient(135deg, #16161d, #221019); color: #fff; text-align: center;
  border-radius: 20px; padding: 18px 30px; box-shadow: 0 24px 60px rgba(0,0,0,.35);
  pointer-events: none; animation: tqBannerIn .3s ease; transition: opacity .4s ease, transform .4s ease;
}
#pedro-ai-app .p-mem-pair-banner.out { opacity: 0; transform: translate(-50%, -64%); }
#pedro-ai-app .p-mem-pair-banner b { display: block; font-family: var(--font-head); font-size: clamp(24px, 3vw, 36px); font-weight: 800; }
#pedro-ai-app .p-mem-pair-banner span { display: block; font-size: 15px; opacity: .75; margin-top: 2px; }
#pedro-ai-app .p-mem-pair-banner small { display: block; margin-top: 8px; font-size: 12px; font-weight: 800; color: #F6C344; }
@keyframes tqBannerIn { from { opacity: 0; transform: translate(-50%, -38%) scale(.85); } }

/* 🔗 Une las mitades */
#pedro-ai-app .pmit-header { text-align: center; padding: 6px 14px 14px; }
#pedro-ai-app .pmit-header h2 { margin: 0 0 4px; }
#pedro-ai-app .pmit-header p { color: var(--text-2); font-size: 14px; margin: 0 0 8px; }
#pedro-ai-app .pmit-score { font-family: var(--font-head); font-weight: 800; color: var(--red); font-size: 18px; }
#pedro-ai-app .pmit-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 14px; }
#pedro-ai-app .pmit-col { display: flex; flex-direction: column; gap: 9px; }
#pedro-ai-app .pmit-chip {
  text-align: left; font-family: inherit; font-size: clamp(14px, 1.6vw, 18px); font-weight: 700;
  background: var(--surface); border: 2px solid var(--border-2); border-radius: 14px;
  padding: 13px 15px; cursor: pointer; transition: all .15s ease; line-height: 1.35;
}
#pedro-ai-app .pmit-chip:hover:not(.is-done) { border-color: var(--red); transform: translateY(-2px); }
#pedro-ai-app .pmit-chip.is-sel { border-color: var(--red); background: #FFF1F2; box-shadow: 0 0 0 3px rgba(108,92,231,.15); }
#pedro-ai-app .pmit-chip.is-done { opacity: .38; border-color: #1B7E3F; cursor: default; }
#pedro-ai-app .pmit-chip.is-wrong { border-color: var(--red); background: #FFE9EA; animation: tqChipShake .35s ease; }
#pedro-ai-app .pmit-built { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
#pedro-ai-app .pmit-sentence { background: #E8F8EE; border: 1px solid #B7E4C7; border-radius: 12px; padding: 10px 14px; animation: tqBannerIn .25s ease; }
#pedro-ai-app .pmit-sentence b { font-size: 15.5px; }
#pedro-ai-app .pmit-sentence span { display: block; font-size: 12.5px; color: #2D6A4F; margin-top: 2px; }
#pedro-ai-app .pmit-sentence small { display: block; font-size: 11px; font-weight: 800; color: #B98900; margin-top: 4px; }
#pedro-ai-app .pmit-finish { margin: 6px 14px 14px; text-align: center; font-weight: 800; background: #FFF8E6; border: 1.5px solid #F6C344; border-radius: 14px; padding: 14px; }
@media (max-width: 640px) { #pedro-ai-app .pmit-cols { grid-template-columns: 1fr; } }

/* 🎤 Describe sin decir */
#pedro-ai-app .ppir-header { text-align: center; padding: 6px 14px 8px; }
#pedro-ai-app .ppir-header p { color: var(--text-2); font-size: 14px; margin: 4px 0 0; }
#pedro-ai-app .ppir-hud { display: flex; justify-content: center; align-items: center; gap: 16px; padding: 8px; font-weight: 800; color: var(--text-2); }
#pedro-ai-app .ppir-timer { font-family: var(--font-head); font-size: 30px; font-weight: 800; color: var(--text); background: var(--surface-2); border-radius: 12px; padding: 4px 16px; }
#pedro-ai-app .ppir-timer.low { color: #fff; background: var(--red); animation: tqStreakBump .5s ease infinite; }
#pedro-ai-app .ppir-card { text-align: center; padding: 22px 16px; }
#pedro-ai-app .ppir-emoji { font-size: 52px; }
#pedro-ai-app .ppir-word { font-family: var(--font-head); font-size: clamp(34px, 5vw, 56px); font-weight: 800; margin: 6px 0 2px; }
#pedro-ai-app .ppir-en { color: var(--text-3); font-weight: 700; font-size: 15px; }
#pedro-ai-app .ppir-forbidden { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
#pedro-ai-app .ppir-forbidden span { background: #FFE9EA; color: #B3151A; border: 1.5px solid #F5B5B8; border-radius: 99px; padding: 7px 14px; font-weight: 800; font-size: clamp(14px, 1.8vw, 18px); }
#pedro-ai-app .ppir-actions { display: flex; justify-content: center; gap: 12px; padding: 8px 16px 20px; }
#pedro-ai-app .ppir-actions .pedro-btn { font-size: 17px; padding: 13px 26px; }
#pedro-ai-app .ppir-intro { text-align: center; padding: 30px 16px; }
#pedro-ai-app .ppir-end { text-align: center; padding: 34px 16px; }
#pedro-ai-app .ppir-end-emoji { font-size: 64px; animation: tqTrophy 1.1s ease infinite alternate; display: inline-block; }
#pedro-ai-app .ppir-end-tip { color: var(--text-2); font-size: 13.5px; }

/* ── RESIZE DE ESQUINA v6.37.1 ── */
#pedro-ai-app .tq-wb-item { position: absolute; }
#pedro-ai-app .tq-wb-item-resizer {
  position: absolute; right: -3px; bottom: -3px; width: 22px; height: 22px;
  cursor: nwse-resize; z-index: 8; border-radius: 4px 0 14px 0;
  opacity: 0; transition: opacity .15s ease;
  background:
    linear-gradient(135deg, transparent 0 52%, rgba(0,0,0,.28) 52% 60%, transparent 60% 70%, rgba(0,0,0,.28) 70% 78%, transparent 78%);
  touch-action: none;
}
#pedro-ai-app .tq-wb-item:hover .tq-wb-item-resizer,
#pedro-ai-app .tq-wb-item.is-resizing .tq-wb-item-resizer { opacity: .85; }
#pedro-ai-app .tq-wb-item.is-resizing { box-shadow: 0 0 0 2.5px rgba(108,92,231,.45), 0 16px 40px rgba(0,0,0,.18) !important; user-select: none; }
#pedro-ai-app .tq-wb-item.is-resizing * { pointer-events: none; }
#pedro-ai-app .tq-wb-item.is-resizing .tq-wb-item-resizer { pointer-events: auto; }
@media (pointer: coarse) {
  #pedro-ai-app .tq-wb-item-resizer { width: 30px; height: 30px; opacity: .5; }
}

/* ── VARITA IA POR ELEMENTO v6.38.0 ── */
#pedro-ai-app .tq-wb-item-wand {
  width: 24px; height: 24px; border: none; border-radius: 7px; cursor: pointer;
  background: transparent; font-size: 13px; line-height: 1; padding: 0; margin-right: 2px;
  opacity: .55; transition: all .15s ease; flex-shrink: 0;
}
#pedro-ai-app .tq-wb-item-wand:hover { opacity: 1; background: rgba(108,92,231,.10); transform: rotate(-12deg) scale(1.1); }
#pedro-ai-app .tq-wand-menu {
  position: absolute; top: 34px; right: 6px; z-index: 40;
  background: #16161d; border-radius: 14px; padding: 6px;
  display: flex; flex-direction: column; gap: 3px; min-width: 175px;
  box-shadow: 0 18px 44px rgba(0,0,0,.4); animation: tqBannerIn .18s ease;
}
#pedro-ai-app .tq-wand-menu button {
  border: none; background: transparent; color: #fff; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 700; text-align: left;
  border-radius: 9px; padding: 8px 12px; transition: background .12s ease;
}
#pedro-ai-app .tq-wand-menu button:hover { background: rgba(108,92,231,.85); }
#pedro-ai-app .tq-wand-menu button:disabled { opacity: .6; cursor: wait; }
#pedro-ai-app .tq-wand-menu .tq-wand-undo { border-top: 1px solid rgba(255,255,255,.14); margin-top: 3px; color: #F6C344; }
#pedro-ai-app .tq-wand-flash { animation: tqWandFlash 1s ease; }
@keyframes tqWandFlash { 0%{box-shadow:0 0 0 3px rgba(246,195,68,.0)} 25%{box-shadow:0 0 0 4px rgba(246,195,68,.85), 0 14px 40px rgba(246,195,68,.35)} 100%{box-shadow:0 0 0 3px rgba(246,195,68,0)} }

/* ── v6.38.1: candado y pintura ── */
#pedro-ai-app .tq-wb-item-lock, #pedro-ai-app .tq-wb-item-paint {
  width: 24px; height: 24px; border: none; border-radius: 7px; cursor: pointer;
  background: transparent; font-size: 12px; line-height: 1; padding: 0; margin-right: 2px;
  opacity: .5; transition: all .15s ease; flex-shrink: 0;
}
#pedro-ai-app .tq-wb-item-lock:hover, #pedro-ai-app .tq-wb-item-paint:hover { opacity: 1; background: rgba(0,0,0,.08); }
#pedro-ai-app .tq-wb-item.is-locked { box-shadow: 0 0 0 2px rgba(15,23,42,.18) !important; }
#pedro-ai-app .tq-wb-item.is-locked .tq-wb-item-lock { opacity: .95; }
#pedro-ai-app .tq-wb-item.is-locked .tq-wb-item-resizer { display: none; }

/* ═══ v6.38.3: resize 2D + cabecera y contenido que se adaptan ═══ */
/* Cabecera robusta: título encoge, iconos NUNCA se encogen y hacen wrap */
#pedro-ai-app .tq-wb-v2 .tq-wb-item-head { flex-wrap: wrap !important; row-gap: 4px !important; }
#pedro-ai-app .tq-wb-v2 .tq-wb-item-title { flex: 1 1 60px !important; min-width: 60px !important; overflow: hidden !important; text-overflow: ellipsis !important; }
/* Los botones de acción (varita, paleta, candado, ⧉, ×) se agrupan y no se comprimen */
#pedro-ai-app .tq-wb-v2 .tq-wb-item-wand,
#pedro-ai-app .tq-wb-v2 .tq-wb-item-paint,
#pedro-ai-app .tq-wb-v2 .tq-wb-item-lock,
#pedro-ai-app .tq-wb-v2 .tq-wb-item-duplicate,
#pedro-ai-app .tq-wb-v2 .tq-wb-item-close { flex: 0 0 auto !important; }
#pedro-ai-app .tq-wb-v2 .tq-wb-item-tools { flex: 0 0 auto !important; }

/* Cuerpo: cuando hay altura fija (resize manual), rellena y hace scroll en vez de desbordar */
#pedro-ai-app .tq-wb-v2 .tq-wb-item { display: flex !important; flex-direction: column !important; }
#pedro-ai-app .tq-wb-v2 .tq-wb-item-body { flex: 1 1 auto !important; min-height: 0 !important; overflow: auto !important; }
/* Las rejillas internas (vocab/verbos) se reflujan con el ancho real del elemento */
#pedro-ai-app .tq-wb-v2 .tq-vocab-grid,
#pedro-ai-app .tq-wb-v2 .tq-verb-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important; }

/* Asa de resize: ahora comunica las dos direcciones */
#pedro-ai-app .tq-wb-item-resizer {
  width: 26px; height: 26px; right: -2px; bottom: -2px;
  background:
    linear-gradient(135deg, transparent 0 46%, rgba(0,0,0,.30) 46% 54%, transparent 54% 64%, rgba(0,0,0,.30) 64% 72%, transparent 72% 82%, rgba(0,0,0,.30) 82% 90%, transparent 90%);
}
#pedro-ai-app .tq-wb-item.is-resizing .tq-wb-item-body { pointer-events: none; }

/* ═══ v6.38.4: el contenido interno escala con el tamaño del elemento ═══ */
/* container-type ya está en .tq-wb-item (inline-size). Usamos cqi (1% del
   ancho del contenedor) para que el contenido crezca/encoja de forma
   continua al redimensionar, con clamp para que nunca sea ridículo. */

/* Texto editable de notas y cajas */
#pedro-ai-app .tq-wb-v2 .tq-wb-item-body {
  font-size: clamp(13px, 4.6cqi, 26px) !important;
  line-height: 1.4 !important;
}
/* Lectura / texto largo */
#pedro-ai-app .tq-wb-v2 .tq-text-body {
  font-size: clamp(13px, 4.2cqi, 22px) !important;
  line-height: 1.5 !important;
}
/* Tarjetas de vocabulario: emoji, palabra y traducción escalan juntos */
#pedro-ai-app .tq-wb-v2 .tq-vocab-card .tq-vocab-emoji { font-size: clamp(22px, 9cqi, 52px) !important; }
#pedro-ai-app .tq-wb-v2 .tq-vocab-card strong { font-size: clamp(13px, 4.8cqi, 24px) !important; }
#pedro-ai-app .tq-wb-v2 .tq-vocab-card span { font-size: clamp(11px, 3.6cqi, 18px) !important; }
/* Tarjetas de verbos */
#pedro-ai-app .tq-wb-v2 .tq-verb-card b { font-size: clamp(13px, 4.8cqi, 24px) !important; }
#pedro-ai-app .tq-wb-v2 .tq-verb-card span { font-size: clamp(10px, 3.4cqi, 16px) !important; }
/* Título grande de tarjeta-título: escala de verdad con el ancho */
#pedro-ai-app .tq-wb-v2 .tq-card-title .tq-wb-item-body,
#pedro-ai-app .tq-wb-v2 .tq-card-title .tq-rich-text-editor { font-size: clamp(24px, 13cqi, 80px) !important; line-height: 1.1 !important; }
/* Caja de escritura del alumno */
#pedro-ai-app .tq-wb-v2 .tq-write-box-input { font-size: clamp(13px, 4.4cqi, 22px) !important; }
/* Editor de texto enriquecido */
#pedro-ai-app .tq-wb-v2 .tq-card-rich-text .tq-rich-text-editor { font-size: clamp(14px, 5cqi, 28px) !important; }

/* Reflujo de columnas por ancho real del contenedor (no de la pantalla) */
@container (max-width: 300px) {
  .tq-vocab-grid, .tq-verb-grid { grid-template-columns: 1fr !important; }
}
@container (min-width: 301px) {
  .tq-vocab-grid, .tq-verb-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@container (min-width: 521px) {
  .tq-vocab-grid, .tq-verb-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ═══════════════════════════════════════════════════════════
   v6.39.0 — Elementos vitaminados: visual premium + interacción
   ═══════════════════════════════════════════════════════════ */

/* ── Spinner / dado: ruleta visual con suspense ── */
#pedro-ai-app .tq-native-spinner-wheel {
  position: relative; display: grid; place-items: center;
  min-height: 96px; margin: 4px 0 10px; border-radius: 18px;
  background: radial-gradient(circle at 50% 30%, #2a2440, #16161d);
  border: 2px solid rgba(139,92,246,.4); overflow: hidden;
}
#pedro-ai-app .tq-native-spinner-wheel.is-spinning { animation: tqWheelPulse .5s ease; }
@keyframes tqWheelPulse { 0%,100%{box-shadow:inset 0 0 0 0 rgba(139,92,246,0)} 50%{box-shadow:inset 0 0 30px 4px rgba(139,92,246,.5)} }
#pedro-ai-app .tq-native-spinner-wheel .tq-native-spinner-result {
  font-family: var(--font-head); font-weight: 900; font-size: clamp(16px, 5.5cqi, 26px);
  color: #fff !important; background: transparent !important; border: none !important;
  text-align: center; padding: 14px 18px; line-height: 1.25;
  text-shadow: 0 2px 12px rgba(0,0,0,.45); letter-spacing: -.01em;
}
#pedro-ai-app .tq-native-spinner-wheel .tq-native-spinner-result.is-landed { animation: tqLand .45s cubic-bezier(.2,1.4,.4,1); }
@keyframes tqLand { 0%{transform:scale(.6);opacity:.4} 60%{transform:scale(1.12)} 100%{transform:scale(1);opacity:1} }

/* ── Vocabulario: voltear todo (carta girada) ── */
#pedro-ai-app .tq-native-vocab-token { transition: transform .2s ease, box-shadow .2s ease; }
#pedro-ai-app .tq-native-vocab-token.is-flipped b,
#pedro-ai-app .tq-native-vocab-token.is-flipped small { filter: blur(5px); opacity: .35; transition: filter .2s ease; }
#pedro-ai-app .tq-native-vocab-token.is-flipped:hover b,
#pedro-ai-app .tq-native-vocab-token.is-flipped:hover small { filter: none; opacity: 1; }

/* ── 🧩 Constructor de frases ── */
#pedro-ai-app .tq-native-builder { display: flex; flex-direction: column; gap: 10px; }
#pedro-ai-app .tq-native-builder-line {
  min-height: 56px; border-radius: 16px; padding: 12px;
  background: linear-gradient(135deg, #EFF6FF, #fff); border: 2px dashed #93C5FD;
  display: flex; flex-wrap: wrap; gap: 7px; align-items: center; align-content: flex-start;
}
#pedro-ai-app .tq-builder-ph { color: #93A8C7; font-weight: 700; font-style: italic; font-size: 13px; }
#pedro-ai-app .tq-builder-placed {
  background: #2563EB; color: #fff; border: none; border-radius: 11px;
  padding: 9px 13px; font-weight: 800; font-size: clamp(13px, 4cqi, 18px); cursor: pointer;
  box-shadow: 0 4px 12px rgba(37,99,235,.3); animation: tqChipDrop .25s cubic-bezier(.2,1.3,.4,1);
}
#pedro-ai-app .tq-builder-placed:hover { background: #1D4ED8; transform: translateY(-1px); }
@keyframes tqChipDrop { from{transform:scale(.5) translateY(-8px);opacity:0} to{transform:scale(1);opacity:1} }
#pedro-ai-app .tq-native-builder-bank { display: flex; flex-wrap: wrap; gap: 6px; }
#pedro-ai-app .tq-builder-chip {
  background: #fff; border: 2px solid #DBEAFE; border-radius: 10px;
  padding: 7px 12px; font-weight: 800; font-size: clamp(12px, 3.6cqi, 16px); color: #1E3A8A; cursor: pointer;
  transition: all .14s ease;
}
#pedro-ai-app .tq-builder-chip:hover { border-color: #2563EB; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(37,99,235,.18); }
#pedro-ai-app .tq-native-builder-add { display: flex; gap: 6px; }
#pedro-ai-app .tq-builder-new { flex: 1; border: 1.5px solid #DBEAFE; border-radius: 10px; padding: 8px 11px; font-weight: 700; font-size: 13px; }
#pedro-ai-app .tq-native-builder-add button { border: none; background: #2563EB; color: #fff; border-radius: 10px; width: 40px; font-size: 20px; font-weight: 800; cursor: pointer; }

/* ── 💬 Lluvia de ideas ── */
#pedro-ai-app .tq-native-cloud { display: flex; flex-direction: column; gap: 10px; }
#pedro-ai-app .tq-native-cloud-zone {
  min-height: 90px; border-radius: 16px; padding: 14px;
  background: radial-gradient(circle at 30% 20%, #FAF5FF, #fff); border: 1.5px solid #E9D5FF;
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; justify-content: center; align-content: center;
}
#pedro-ai-app .tq-cloud-ph { color: #C4B5DB; font-weight: 700; font-style: italic; font-size: 13px; }
#pedro-ai-app .tq-cloud-word {
  background: none; border: none; cursor: pointer; font-family: var(--font-head); font-weight: 800;
  line-height: 1; padding: 2px 4px; transition: transform .14s ease;
  animation: tqCloudPop .3s cubic-bezier(.2,1.4,.4,1);
}
#pedro-ai-app .tq-cloud-word:hover { transform: scale(1.14) rotate(-2deg); }
@keyframes tqCloudPop { from{transform:scale(0);opacity:0} to{transform:scale(1);opacity:1} }
#pedro-ai-app .tq-native-cloud-add { display: flex; gap: 6px; }
#pedro-ai-app .tq-cloud-new { flex: 1; border: 1.5px solid #E9D5FF; border-radius: 10px; padding: 8px 11px; font-weight: 700; font-size: 13px; }
#pedro-ai-app .tq-native-cloud-add button { border: none; background: #8B5CF6; color: #fff; border-radius: 10px; width: 40px; font-size: 20px; font-weight: 800; cursor: pointer; }

/* ═══ v6.39.1: varita con vista previa ═══ */
#pedro-ai-app .tq-wand-menu-head { color: #F6C344; font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; padding: 4px 12px 6px; }
#pedro-ai-app .tq-wand-preview {
  position: absolute; top: 34px; right: 6px; z-index: 60; width: min(320px, 88vw);
  background: #fff; border-radius: 16px; padding: 14px; border: 1px solid rgba(15,23,42,.1);
  box-shadow: 0 24px 60px rgba(15,23,42,.3); animation: tqBannerIn .2s ease;
}
#pedro-ai-app .tq-wand-pv-head { font-family: var(--font-head); font-weight: 800; font-size: 14px; color: var(--text); margin-bottom: 10px; }
#pedro-ai-app .tq-wand-pv-before, #pedro-ai-app .tq-wand-pv-after { border-radius: 11px; padding: 9px 11px; margin-bottom: 8px; }
#pedro-ai-app .tq-wand-pv-before { background: #FEF2F2; border: 1px solid #FECACA; }
#pedro-ai-app .tq-wand-pv-after { background: #ECFDF5; border: 1px solid #A7F3D0; }
#pedro-ai-app .tq-wand-pv-before span, #pedro-ai-app .tq-wand-pv-after span {
  display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 3px;
}
#pedro-ai-app .tq-wand-pv-before span { color: #B91C1C; }
#pedro-ai-app .tq-wand-pv-after span { color: #047857; }
#pedro-ai-app .tq-wand-pv-before p { margin: 0; font-size: 13.5px; color: #7F1D1D; line-height: 1.4; }
#pedro-ai-app .tq-wand-pv-after p { margin: 0; font-size: 14px; font-weight: 700; color: #064E3B; line-height: 1.4; outline: none; border-radius: 6px; }
#pedro-ai-app .tq-wand-pv-after p:focus { background: #fff; box-shadow: 0 0 0 2px #6EE7B7; }
#pedro-ai-app .tq-wand-pv-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
#pedro-ai-app .tq-wand-pv-actions button { border: none; border-radius: 10px; padding: 9px 16px; font-weight: 800; font-size: 13px; cursor: pointer; }
#pedro-ai-app .tq-wand-pv-cancel { background: var(--surface-2); color: var(--text-3); }
#pedro-ai-app .tq-wand-pv-cancel:hover { background: var(--border); }
#pedro-ai-app .tq-wand-pv-apply { background: #1B7E3F; color: #fff; }
#pedro-ai-app .tq-wand-pv-apply:hover { background: #166534; }

/* ═══════════════════════════════════════════════════════════
   v6.40.0 — Orquestador "Clase entera": el botón estrella
   ═══════════════════════════════════════════════════════════ */
#pedro-ai-app .tq-wb-lesson-hero {
  display: flex; align-items: center; gap: 14px; width: 100%;
  border: none; cursor: pointer; text-align: left;
  padding: 16px 18px; margin-bottom: 12px; border-radius: 18px;
  background: linear-gradient(120deg, #6C5CE7 0%, #b3151a 55%, #7a0e12 100%);
  color: #fff; box-shadow: 0 14px 34px rgba(108,92,231,.32);
  position: relative; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease;
}
#pedro-ai-app .tq-wb-lesson-hero::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 85% -20%, rgba(255,255,255,.28), transparent 55%);
  pointer-events: none;
}
#pedro-ai-app .tq-wb-lesson-hero:hover { transform: translateY(-2px); box-shadow: 0 20px 44px rgba(108,92,231,.42); }
#pedro-ai-app .tq-wb-lesson-hero:active { transform: translateY(0); }
#pedro-ai-app .tq-hero-spark { font-size: 30px; flex-shrink: 0; animation: tqHeroSpark 2.4s ease infinite; }
@keyframes tqHeroSpark { 0%,100%{transform:scale(1) rotate(0)} 50%{transform:scale(1.18) rotate(8deg)} }
#pedro-ai-app .tq-hero-txt { flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
#pedro-ai-app .tq-hero-txt b { font-family: var(--font-head); font-size: 19px; font-weight: 800; }
#pedro-ai-app .tq-hero-txt small { font-size: 12px; opacity: .9; margin-top: 2px; }
#pedro-ai-app .tq-hero-go { font-weight: 800; font-size: 14px; background: rgba(255,255,255,.2); padding: 8px 14px; border-radius: 99px; flex-shrink: 0; }
@media (max-width: 680px) {
  #pedro-ai-app .tq-wb-lesson-hero { flex-wrap: wrap; }
  #pedro-ai-app .tq-hero-go { width: 100%; text-align: center; margin-top: 4px; }
}

/* ── v6.40.0: aparición con vida de los elementos ── */
@keyframes tqItemAppear {
  0% { opacity: 0; transform: translateY(14px) scale(.94); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
#pedro-ai-app .tq-wb-v2 .tq-wb-item.tq-item-appear { animation: tqItemAppear .34s cubic-bezier(.2,.9,.3,1.1) both; }
/* halo sutil al recién creado */
@keyframes tqItemHalo { 0%{box-shadow:0 0 0 3px rgba(108,92,231,.35)} 100%{box-shadow:0 0 0 0 rgba(108,92,231,0)} }
#pedro-ai-app .tq-wb-v2 .tq-wb-item.tq-item-fresh { animation: tqItemAppear .34s cubic-bezier(.2,.9,.3,1.1) both, tqItemHalo 1.1s ease .34s; }

/* Lienzo: viñeta sutil para dar profundidad de "mesa de trabajo" */
#pedro-ai-app .tq-whiteboard-stage::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; border-radius: inherit;
  box-shadow: inset 0 0 120px rgba(15,23,42,.05);
}

/* ═══════════════════════════════════════════════════════════
   v6.41.0 — Voz universal + Práctica de pronunciación 🎤
   ═══════════════════════════════════════════════════════════ */
/* Botón 🔊 de voz en la cabecera */
#pedro-ai-app .tq-wb-item-speak {
  width: 24px; height: 24px; border: none; border-radius: 7px; cursor: pointer;
  background: transparent; font-size: 13px; line-height: 1; padding: 0; margin-right: 2px;
  opacity: .55; transition: all .15s ease; flex: 0 0 auto;
}
#pedro-ai-app .tq-wb-item-speak:hover { opacity: 1; background: rgba(27,126,63,.12); }
#pedro-ai-app .tq-wb-item-speak.is-speaking { opacity: 1; animation: tqSpeakPulse .7s ease infinite; }
@keyframes tqSpeakPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.25)} }

/* Elemento de pronunciación */
#pedro-ai-app .tq-native-pronun { display: flex; flex-direction: column; gap: 12px; }
#pedro-ai-app .tq-pronun-target {
  font-family: var(--font-head); font-weight: 800; font-size: clamp(20px, 7cqi, 38px);
  text-align: center; padding: 18px 16px; border-radius: 16px; line-height: 1.25;
  background: linear-gradient(135deg, #ECFDF5, #fff); border: 2px solid #A7F3D0; color: #064E3B;
  outline: none;
}
#pedro-ai-app .tq-pronun-target:focus { box-shadow: 0 0 0 3px rgba(16,185,129,.25); }
#pedro-ai-app .tq-pronun-controls { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
#pedro-ai-app .tq-pronun-controls button { font-size: clamp(14px, 4cqi, 18px); padding: 12px 22px; font-weight: 800; }
#pedro-ai-app .tq-native-pronun [data-native-pronun-hear].is-speaking { animation: tqSpeakPulse .7s ease infinite; }
#pedro-ai-app .tq-native-pronun [data-native-pronun-rec].is-recording { background: #6C5CE7 !important; color: #fff !important; animation: tqRecPulse 1s ease infinite; }
@keyframes tqRecPulse { 0%,100%{box-shadow:0 0 0 0 rgba(108,92,231,.5)} 50%{box-shadow:0 0 0 8px rgba(108,92,231,0)} }
#pedro-ai-app .tq-pronun-nomic { font-size: 12px; color: var(--text-3); font-style: italic; align-self: center; }
#pedro-ai-app .tq-pronun-feedback { border-radius: 14px; padding: 14px; text-align: center; animation: tqBannerIn .3s ease; }
#pedro-ai-app .tq-pronun-feedback.is-great { background: #ECFDF5; border: 2px solid #6EE7B7; }
#pedro-ai-app .tq-pronun-feedback.is-good { background: #F0FDF4; border: 2px solid #A7F3D0; }
#pedro-ai-app .tq-pronun-feedback.is-ok { background: #FFFBEB; border: 2px solid #FCD34D; }
#pedro-ai-app .tq-pronun-feedback.is-low { background: #FEF2F2; border: 2px solid #FECACA; }
#pedro-ai-app .tq-pronun-score { font-family: var(--font-head); font-weight: 800; font-size: clamp(26px, 9cqi, 44px); line-height: 1; margin-bottom: 4px; }
#pedro-ai-app .tq-pronun-feedback.is-great .tq-pronun-score, #pedro-ai-app .tq-pronun-feedback.is-good .tq-pronun-score { color: #047857; }
#pedro-ai-app .tq-pronun-feedback.is-ok .tq-pronun-score { color: #B45309; }
#pedro-ai-app .tq-pronun-feedback.is-low .tq-pronun-score { color: #B91C1C; }
#pedro-ai-app .tq-pronun-heard { font-size: 13px; color: var(--text-2); font-style: italic; margin-bottom: 4px; }
#pedro-ai-app .tq-pronun-msg { font-weight: 800; font-size: 14px; }
#pedro-ai-app .tq-pronun-hint { font-size: 12px; color: var(--text-3); text-align: center; }

/* ── v6.41.0: resultado IA con arco de secuencia ── */
#pedro-ai-app .tq-wb-ai-card { position: relative; display: flex; flex-direction: column; gap: 6px; }
#pedro-ai-app .tq-wb-ai-card-meta { display: flex; align-items: center; gap: 8px; }
#pedro-ai-app .tq-wb-ai-step {
  display: inline-grid; place-items: center; width: 22px; height: 22px; flex-shrink: 0;
  background: var(--red, #6C5CE7); color: #fff; border-radius: 50%;
  font-family: var(--font-head); font-weight: 800; font-size: 12px;
}
#pedro-ai-app .tq-wb-ai-script {
  font-size: 12px; font-style: italic; color: var(--text-2);
  background: rgba(15,23,42,.04); border-left: 3px solid var(--red, #6C5CE7);
  border-radius: 0 8px 8px 0; padding: 7px 10px; margin-top: 2px; line-height: 1.4;
}
/* conexión visual de secuencia entre tarjetas */
#pedro-ai-app .tq-wb-ai-cards { counter-reset: aistep; position: relative; }

/* botones de cabecera del resultado IA */
#pedro-ai-app .tq-wb-ai-head-btns { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
#pedro-ai-app .tq-wb-ai-regen {
  width: 38px; height: 38px; border: 1.5px solid var(--border-2); background: var(--surface);
  border-radius: 11px; cursor: pointer; font-size: 17px; transition: all .15s ease;
}
#pedro-ai-app .tq-wb-ai-regen:hover { border-color: var(--red, #6C5CE7); transform: rotate(-30deg); }

/* ── v6.41.2: gancho creativo de la IA ── */
#pedro-ai-app .tq-wb-ai-hook {
  font-size: 12.5px; font-weight: 700; color: #7c3aed; line-height: 1.4;
  background: linear-gradient(135deg, rgba(139,92,246,.10), rgba(139,92,246,.04));
  border-radius: 9px; padding: 7px 10px; margin: 2px 0;
}
#pedro-ai-app .tq-ai-hook-band {
  font-size: 13px; font-weight: 800; color: #fff; line-height: 1.35;
  background: linear-gradient(120deg, #8b5cf6, #6d28d9);
  border-radius: 12px 12px 0 0; padding: 9px 13px; margin: -2px -2px 10px;
}

/* ═══════════════════════════════════════════════════════════
   v6.42.0 — Teeqo Intelligence Whiteboard redesign
   Modern, light and touch-first visual layer.
   ═══════════════════════════════════════════════════════════ */
#pedro-ai-app .tq-wb-v2 {
  --tq-wb-ink: var(--text);
  --tq-wb-muted: var(--text-3);
  --tq-wb-soft: #f6f8fb;
  --tq-wb-line: rgba(15,23,42,.09);
  --tq-wb-line-strong: rgba(15,23,42,.15);
  --tq-wb-red: #6C5CE7;
  --tq-wb-red-dark: #991b1b;
  --tq-wb-blue: #2563eb;
  --tq-wb-green: #059669;
  --tq-wb-amber: #f59e0b;
  --tq-wb-shadow: 0 18px 46px rgba(15,23,42,.10);
  --tq-wb-shadow-soft: 0 10px 26px rgba(15,23,42,.07);
}

#pedro-ai-app .tq-wb-v2 .tq-whiteboard-intro {
  border: 1px solid var(--tq-wb-line) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.96)),
    radial-gradient(circle at 100% 0, rgba(108,92,231,.10), transparent 28%) !important;
  box-shadow: var(--tq-wb-shadow-soft) !important;
  border-radius: 18px !important;
}

#pedro-ai-app .tq-wb-v2 .pedro-card-title {
  letter-spacing: -.035em !important;
  color: var(--tq-wb-ink) !important;
}

#pedro-ai-app .tq-wb-v2 .tq-whiteboard-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: var(--text) !important;
  border-color: rgba(255,255,255,.10) !important;
  color: #fff !important;
  box-shadow: 0 12px 24px rgba(15,23,42,.16) !important;
}

#pedro-ai-app .tq-wb-v2 .tq-whiteboard-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,.16);
}

#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2-topbar,
#pedro-ai-app .tq-wb-v2 .tq-wb-v2-topbar {
  align-items: center !important;
  gap: 8px !important;
  padding: 8px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 14px 34px rgba(15,23,42,.08) !important;
  backdrop-filter: blur(12px) !important;
}

#pedro-ai-app .tq-wb-v2-topbar .tq-wb-command-section {
  min-height: 42px !important;
  padding: 5px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(15,23,42,.06) !important;
  background: var(--bg) !important;
}

#pedro-ai-app .tq-wb-v2-topbar .tq-wb-v2-tools {
  background: var(--text) !important;
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10) !important;
}

#pedro-ai-app .tq-wb-v2-topbar .tq-wb-tool {
  min-width: 34px !important;
  height: 34px !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  background: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.88) !important;
  box-shadow: none !important;
  transition: transform .12s ease, background .12s ease, color .12s ease, box-shadow .12s ease !important;
}

#pedro-ai-app .tq-wb-v2-topbar .tq-wb-tool:hover {
  transform: translateY(-1px) !important;
  background: rgba(255,255,255,.15) !important;
  color: #fff !important;
}

#pedro-ai-app .tq-wb-v2-topbar .tq-wb-tool.active {
  background: #fff !important;
  color: var(--tq-wb-red) !important;
  border-color: #fff !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.22) !important;
}

#pedro-ai-app .tq-wb-v2-topbar .tq-wb-v2-colors {
  gap: 8px !important;
}

#pedro-ai-app .tq-wb-v2-topbar .tq-wb-color {
  width: 25px !important;
  height: 25px !important;
  border: 3px solid #fff !important;
  outline: 1px solid rgba(15,23,42,.16) !important;
  box-shadow: 0 6px 14px rgba(15,23,42,.12) !important;
}

#pedro-ai-app .tq-wb-v2-topbar .tq-wb-color.active {
  outline: 3px solid rgba(108,92,231,.34) !important;
  transform: scale(1.08) !important;
}

#pedro-ai-app .tq-wb-v2-topbar .pedro-btn-secondary,
#pedro-ai-app .tq-wb-v2-topbar .pedro-btn {
  border-radius: 12px !important;
  border-color: rgba(15,23,42,.10) !important;
  background: #fff !important;
  color: var(--tq-wb-ink) !important;
  box-shadow: 0 5px 12px rgba(15,23,42,.05) !important;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease !important;
}

#pedro-ai-app .tq-wb-v2-topbar .pedro-btn-secondary:hover,
#pedro-ai-app .tq-wb-v2-topbar .pedro-btn:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(108,92,231,.30) !important;
  background: #fff7f7 !important;
  box-shadow: 0 10px 20px rgba(108,92,231,.09) !important;
}

#pedro-ai-app .tq-wb-v2-topbar #tq-wb-clear {
  color: var(--tq-wb-red) !important;
}

#pedro-ai-app .tq-wb-v2-topbar .tq-wb-toggle-dock-btn.is-active,
#pedro-ai-app .tq-wb-v2-topbar .tq-wb-toggle-dock-btn[aria-pressed="true"] {
  background: var(--text) !important;
  color: #fff !important;
  border-color: var(--text) !important;
}

#pedro-ai-app .tq-wb-v2-topbar .tq-wb-save-status {
  min-width: 92px !important;
  color: var(--tq-wb-green) !important;
  text-align: center !important;
}

#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2-workspace,
#pedro-ai-app .tq-wb-v2 .tq-wb-v2-workspace {
  gap: 12px !important;
}

#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2-stage,
#pedro-ai-app .tq-wb-v2 .tq-wb-v2-stage {
  border: 1px solid rgba(15,23,42,.12) !important;
  border-radius: 26px !important;
  background-color: #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -32px 80px rgba(15,23,42,.025),
    0 24px 70px rgba(15,23,42,.12) !important;
}

#pedro-ai-app .tq-wb-v2 .tq-whiteboard-stage::before {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.70),
    inset 0 0 110px rgba(15,23,42,.045) !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-bg-grid {
  background-image:
    linear-gradient(rgba(37,99,235,.070) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,.070) 1px, transparent 1px),
    radial-gradient(circle at 0 0, rgba(108,92,231,.040), transparent 32%) !important;
  background-size: 34px 34px, 34px 34px, 100% 100% !important;
}

#pedro-ai-app .tq-wb-v2 .tq-whiteboard-empty {
  min-width: min(360px, 80%) !important;
  padding: 22px 24px !important;
  border-radius: 24px !important;
  color: rgba(17,24,39,.52) !important;
  background: rgba(255,255,255,.58) !important;
  border: 1px dashed rgba(15,23,42,.16) !important;
  box-shadow: 0 16px 34px rgba(15,23,42,.06) !important;
}

#pedro-ai-app .tq-wb-v2 .tq-whiteboard-empty strong {
  font-size: clamp(26px, 4vw, 46px) !important;
  letter-spacing: -.045em !important;
  color: rgba(17,24,39,.64) !important;
}

#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2-dock,
#pedro-ai-app .tq-wb-v2 .tq-wb-v2-dock {
  padding-right: 7px !important;
  scrollbar-color: rgba(15,23,42,.20) transparent !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-dock-panel {
  border: 1px solid var(--tq-wb-line) !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.97) !important;
  box-shadow: 0 12px 28px rgba(15,23,42,.06) !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-dock-panel summary {
  min-height: 48px !important;
  padding: 13px 14px !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-dock-panel summary span {
  letter-spacing: -.015em !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-dock-panel summary small {
  color: #7c8da5 !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-dock-panel[open] summary::after {
  background: var(--tq-wb-red) !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-dock-ai {
  border-color: rgba(108,92,231,.20) !important;
  box-shadow: 0 18px 38px rgba(108,92,231,.09), 0 10px 24px rgba(15,23,42,.05) !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-dock-ai summary {
  background: linear-gradient(135deg, var(--text), #2b1116) !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-dock-ai summary span,
#pedro-ai-app .tq-wb-v2 .tq-wb-dock-ai summary small {
  color: #fff !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-dock-ai summary small {
  opacity: .70 !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-dock-ai summary::after {
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-studio {
  position: relative !important;
  gap: 11px !important;
  padding: 13px !important;
  background:
    linear-gradient(180deg, #fff 0%, #fff8f8 46%, var(--bg) 100%) !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-studio::before {
  content: "Teeqo Intelligence";
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--text);
  color: #fff;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-ai-head strong {
  font-size: 18px !important;
  letter-spacing: -.025em !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-ai-head span {
  color: var(--tq-wb-muted) !important;
}

#pedro-ai-app .tq-wb-v2 #tq-wb-ai-prompt {
  border-radius: 16px !important;
  background: #fff !important;
  border-color: rgba(15,23,42,.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.94), 0 8px 18px rgba(15,23,42,.04) !important;
}

#pedro-ai-app .tq-wb-v2 #tq-wb-ai-prompt:focus {
  border-color: rgba(108,92,231,.55) !important;
  box-shadow: 0 0 0 4px rgba(108,92,231,.11), inset 0 1px 0 rgba(255,255,255,.94) !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-level-row label {
  border-color: rgba(15,23,42,.10) !important;
  color: var(--text-2) !important;
  box-shadow: 0 4px 10px rgba(15,23,42,.04) !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-level-row label:has(input:checked) {
  background: var(--text) !important;
  border-color: var(--text) !important;
  color: #fff !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-lesson-hero {
  border-radius: 20px !important;
  background: linear-gradient(135deg, #6C5CE7 0%, #4C3EC8 55%, var(--text) 100%) !important;
  box-shadow: 0 18px 38px rgba(108,92,231,.28) !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-lesson-hero::after {
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.20), transparent),
    radial-gradient(circle at 92% 0, rgba(255,255,255,.28), transparent 42%) !important;
  transform: translateX(-100%);
  animation: tqIntelligenceShine 4.8s ease-in-out infinite;
}

@keyframes tqIntelligenceShine {
  0%, 42% { transform: translateX(-100%); opacity: 0; }
  54% { opacity: 1; }
  72%, 100% { transform: translateX(100%); opacity: 0; }
}

#pedro-ai-app .tq-wb-v2 .tq-wb-studio-modes-four .tq-wb-ai-btn {
  min-height: 46px !important;
  border-radius: 15px !important;
  border-color: rgba(15,23,42,.10) !important;
  background: #fff !important;
  box-shadow: 0 9px 18px rgba(15,23,42,.05) !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-studio-modes-four .tq-wb-ai-btn:hover {
  border-color: rgba(108,92,231,.35) !important;
  background: #fff7f7 !important;
  box-shadow: 0 14px 28px rgba(108,92,231,.10) !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-ai-convert {
  min-height: 50px !important;
  background: linear-gradient(135deg, var(--text), #7f1d1d) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 16px 32px rgba(15,23,42,.18) !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-studio-note {
  border-left: 4px solid var(--tq-wb-red) !important;
  background: #fff !important;
  color: #7f1d1d !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92) !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-ai-loading {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--text) !important;
  border-color: var(--text) !important;
  color: #fff !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-ai-loading::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,.16);
}

/* Estado de error de Teeqo Intelligence con botón de reintento. */
#pedro-ai-app .tq-wb-v2 .tq-wb-ai-error {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
  padding: 12px !important;
  border-radius: 14px !important;
  background: #FEF2F2 !important;
  border: 1px solid #FECACA !important;
  color: #991B1B !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-ai-error strong { font-size: 13px !important; }
#pedro-ai-app .tq-wb-v2 .tq-wb-ai-error span { font-weight: 700 !important; opacity: .85 !important; }

#pedro-ai-app .tq-wb-v2 .tq-wb-ai-retry {
  margin-top: 2px !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 7px 14px !important;
  background: #6C5CE7 !important;
  color: #fff !important;
  font-weight: 900 !important;
  font-size: 12px !important;
  cursor: pointer !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-ai-retry:hover { background: #5546D6 !important; }

#pedro-ai-app .tq-wb-v2 .tq-wb-ai-output-head {
  padding: 10px !important;
  border-radius: 16px !important;
  background: var(--text) !important;
  color: #fff !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-ai-output-head b,
#pedro-ai-app .tq-wb-v2 .tq-wb-ai-output-head span {
  color: #fff !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-ai-output-head span {
  opacity: .72 !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-ai-head-btns .tq-wb-ai-regen {
  border-color: rgba(255,255,255,.16) !important;
  background: rgba(255,255,255,.10) !important;
  color: #fff !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-ai-add-all {
  background: #fff !important;
  color: var(--tq-wb-red) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.16) !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-ai-card {
  border-radius: 17px !important;
  border-color: rgba(15,23,42,.09) !important;
  box-shadow: 0 12px 24px rgba(15,23,42,.06) !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-ai-card strong {
  letter-spacing: -.015em !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-ai-step {
  background: var(--text) !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-ai-script {
  border-left-color: var(--tq-wb-red) !important;
  background: rgba(108,92,231,.055) !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-teacher-tools {
  gap: 9px !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-elements-v6203 button {
  border-radius: 18px !important;
  border-color: rgba(15,23,42,.10) !important;
  box-shadow: 0 9px 20px rgba(15,23,42,.055) !important;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-elements-v6203 button:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(15,23,42,.18) !important;
  box-shadow: 0 16px 30px rgba(15,23,42,.10) !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-item {
  border-width: 1px !important;
  border-radius: 20px !important;
  box-shadow: 0 18px 42px rgba(15,23,42,.14) !important;
  overflow: visible !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-item-head {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.94)) !important;
  border-bottom-color: rgba(15,23,42,.08) !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-item-tools {
  background: #fff !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-item-close {
  background: var(--surface-2) !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-item-body {
  background: linear-gradient(180deg, #fff, #fbfdff) !important;
}

#pedro-ai-app .tq-wb-v2 .tq-card-note {
  border-radius: 10px 22px 22px 22px !important;
  box-shadow: 0 18px 34px rgba(180,83,9,.16) !important;
}

#pedro-ai-app .tq-wb-v2 .tq-card-title .tq-wb-item-body {
  background: transparent !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-game-shell,
#pedro-ai-app .tq-wb-v2 .tq-text-widget,
#pedro-ai-app .tq-wb-v2 .tq-media-image img,
#pedro-ai-app .tq-wb-v2 .tq-media-youtube iframe {
  border-radius: 18px !important;
}

#pedro-ai-app .tq-wb-v2 .tq-whiteboard-quickbar {
  gap: 8px !important;
  padding: 12px !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-stamp {
  border-radius: 14px !important;
  border-color: rgba(15,23,42,.10) !important;
  background: #fff !important;
  box-shadow: 0 8px 16px rgba(15,23,42,.06) !important;
  transition: transform .12s ease, box-shadow .12s ease !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-stamp:hover {
  transform: translateY(-1px) scale(1.03) !important;
  box-shadow: 0 12px 24px rgba(15,23,42,.10) !important;
}

@media (prefers-reduced-motion: reduce) {
  #pedro-ai-app .tq-wb-v2 *,
  #pedro-ai-app .tq-wb-v2 *::before,
  #pedro-ai-app .tq-wb-v2 *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media (max-width: 1120px) {
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2-workspace {
    grid-template-columns: minmax(0,1fr) minmax(286px,340px) !important;
  }
}

@media (max-width: 820px) {
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2-topbar,
  #pedro-ai-app .tq-wb-v2 .tq-wb-v2-topbar {
    border-radius: 18px !important;
  }

  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2-stage {
    border-radius: 22px !important;
  }

  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2-dock {
    border-top: 1px solid rgba(15,23,42,.08) !important;
    padding-top: 2px !important;
  }
}

@media (max-width: 560px) {
  #pedro-ai-app .tq-wb-v2-topbar .tq-wb-v2-actions {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0,1fr)) !important;
    width: 100% !important;
  }

  #pedro-ai-app .tq-wb-v2-topbar .tq-wb-v2-actions .pedro-btn-secondary,
  #pedro-ai-app .tq-wb-v2-topbar .tq-wb-v2-actions .pedro-btn {
    min-width: 0 !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  #pedro-ai-app .tq-wb-v2 .tq-whiteboard-empty {
    min-width: calc(100% - 42px) !important;
    padding: 18px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   v6.43.0 — Total whiteboard redesign from structure up
   Left rail · central canvas · right Teeqo Intelligence dock.
   ═══════════════════════════════════════════════════════════ */
#pedro-ai-app .tq-wb-v3 {
  --tq3-bg: #eef2f7;
  --tq3-panel: rgba(255,255,255,.96);
  --tq3-panel-solid: #fff;
  --tq3-ink: #101828;
  --tq3-muted: #667085;
  --tq3-line: rgba(16,24,40,.10);
  --tq3-line-strong: rgba(16,24,40,.16);
  --tq3-red: #6C5CE7;
  --tq3-red-dark: #B91C1C;
  --tq3-blue: #2563eb;
  --tq3-green: #059669;
  --tq3-radius: 22px;
  --tq3-shadow: 0 22px 60px rgba(16,24,40,.12);
  --tq3-soft-shadow: 0 12px 30px rgba(16,24,40,.08);
  color: var(--tq3-ink);
}

#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-shell {
  background:
    radial-gradient(circle at 12% 0%, rgba(108,92,231,.08), transparent 28%),
    radial-gradient(circle at 92% 8%, rgba(37,99,235,.08), transparent 30%),
    linear-gradient(180deg, var(--bg) 0%, #eef2f7 100%) !important;
}

#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-shell {
  gap: 12px !important;
  padding: 0 !important;
}

#pedro-ai-app .tq-wb-v3-topbar,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-topbar {
  position: relative !important;
  z-index: 20 !important;
  display: grid !important;
  grid-template-columns: minmax(220px, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 62px !important;
  padding: 8px 10px !important;
  border: 1px solid var(--tq3-line) !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 16px 40px rgba(16,24,40,.08) !important;
  backdrop-filter: blur(18px) !important;
  overflow: visible !important;
}

#pedro-ai-app .tq-wb-v3-brand {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 11px;
}

#pedro-ai-app .tq-wb-v3-brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 15px;
  background: linear-gradient(135deg, #7C6CE8, #5F6BE0);
  color: #fff;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: -.02em;
  box-shadow: 0 12px 24px rgba(108,92,231,.20);
}

#pedro-ai-app .tq-wb-v3-brand strong {
  display: block;
  font-family: var(--font-head, Outfit, Inter, system-ui, sans-serif);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.05;
  letter-spacing: -.035em;
  color: var(--tq3-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#pedro-ai-app .tq-wb-v3-brand small {
  display: block;
  margin-top: 2px;
  max-width: 58ch;
  color: var(--tq3-muted);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#pedro-ai-app .tq-wb-v3-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

#pedro-ai-app .tq-wb-v3-actions .tq-wb-action-btn {
  display: grid !important;
  place-items: center !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  border-radius: 14px !important;
  border: 1px solid var(--tq3-line) !important;
  background: #fff !important;
  color: var(--tq3-ink) !important;
  box-shadow: 0 7px 16px rgba(16,24,40,.055) !important;
}

#pedro-ai-app .tq-wb-v3-actions .tq-wb-action-btn:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(108,92,231,.32) !important;
  box-shadow: 0 14px 26px rgba(108,92,231,.10) !important;
}

#pedro-ai-app .tq-wb-v3-actions .tq-wb-danger-action {
  color: #DC2626 !important;
}

#pedro-ai-app .tq-wb-v3-actions .tq-wb-toggle-dock-btn.is-active,
#pedro-ai-app .tq-wb-v3-actions .tq-wb-toggle-dock-btn[aria-pressed="true"] {
  background: var(--text) !important;
  border-color: var(--text) !important;
  color: #fff !important;
}

#pedro-ai-app .tq-wb-v3-actions .tq-wb-save-status {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 80px !important;
  max-width: 120px !important;
  color: var(--tq3-green) !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-workspace,
#pedro-ai-app .tq-wb-v3-workspace {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: 92px minmax(0, 1fr) minmax(340px, 410px) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: stretch !important;
  overflow: hidden !important;
}

#pedro-ai-app .tq-wb-v3-rail {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: auto;
  padding: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(16,24,40,.20) transparent;
}

#pedro-ai-app .tq-wb-v3-rail-card {
  flex: 0 0 auto;
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--tq3-line);
  border-radius: 22px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 10px 24px rgba(16,24,40,.065);
}

#pedro-ai-app .tq-wb-v3-rail-label,
#pedro-ai-app .tq-wb-v3-kicker {
  color: #7c8da5;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}

#pedro-ai-app .tq-wb-v3-tools,
#pedro-ai-app .tq-wb-v3-colors {
  display: grid !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  gap: 7px !important;
  overflow: visible !important;
}

#pedro-ai-app .tq-wb-v3-tools {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#pedro-ai-app .tq-wb-v3-tools .tq-wb-tool {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border-radius: 13px !important;
  border: 1px solid rgba(16,24,40,.10) !important;
  background: #fff !important;
  color: var(--text) !important;
  box-shadow: 0 6px 14px rgba(16,24,40,.055) !important;
}

#pedro-ai-app .tq-wb-v3-tools .tq-wb-tool.active {
  background: var(--text) !important;
  color: #fff !important;
  border-color: var(--text) !important;
  box-shadow: 0 12px 22px rgba(16,24,40,.18) !important;
}

#pedro-ai-app .tq-wb-v3-colors {
  grid-template-columns: repeat(3, 1fr) !important;
}

#pedro-ai-app .tq-wb-v3-colors .tq-wb-color {
  width: 20px !important;
  height: 20px !important;
  justify-self: center !important;
  border-width: 2px !important;
}

#pedro-ai-app .tq-wb-v3-settings-card .tq-wb-size {
  display: grid !important;
  gap: 7px !important;
  color: #475467 !important;
  font-size: 9px !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

#pedro-ai-app .tq-wb-v3-settings-card #tq-wb-size {
  width: 100% !important;
  min-width: 0 !important;
  accent-color: var(--tq3-red) !important;
}

#pedro-ai-app .tq-wb-v3-settings-card .tq-wb-bg {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 34px !important;
  padding: 0 7px !important;
  border-radius: 12px !important;
  border: 1px solid var(--tq3-line) !important;
  background: #fff !important;
  font-size: 10px !important;
  font-weight: 900 !important;
}

#pedro-ai-app .tq-wb-v3-zoom-card {
  grid-template-columns: 1fr !important;
  gap: 7px !important;
}

#pedro-ai-app .tq-wb-v3-zoom-card .pedro-btn-secondary {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border-radius: 13px !important;
  background: #fff !important;
  border-color: var(--tq3-line) !important;
  color: var(--tq3-ink) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

#pedro-ai-app .tq-wb-v3-canvas-zone {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#pedro-ai-app .tq-wb-v3-canvas-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--tq3-line);
  border-radius: 20px;
  background: rgba(255,255,255,.90);
  box-shadow: 0 10px 24px rgba(16,24,40,.055);
}

#pedro-ai-app .tq-wb-v3-canvas-head strong {
  display: block;
  margin-top: 1px;
  font-family: var(--font-head, Outfit, Inter, system-ui, sans-serif);
  font-size: 15px;
  font-weight: 950;
  letter-spacing: -.02em;
  color: var(--tq3-ink);
}

#pedro-ai-app .tq-wb-v3-status-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

#pedro-ai-app .tq-wb-v3-status-pills span {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--tq3-line);
  color: #475467;
  font-size: 10px;
  font-weight: 950;
}

#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-stage,
#pedro-ai-app .tq-wb-v3-stage {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  border-radius: 28px !important;
  border: 1px solid rgba(16,24,40,.13) !important;
  background-color: #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -32px 82px rgba(16,24,40,.025),
    0 26px 78px rgba(16,24,40,.14) !important;
}

#pedro-ai-app .tq-wb-v3 .tq-whiteboard-empty {
  background: rgba(255,255,255,.70) !important;
  backdrop-filter: blur(10px) !important;
  border-radius: 28px !important;
}

#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-dock,
#pedro-ai-app .tq-wb-v3-dock {
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 2px 8px 140px 2px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  align-self: stretch !important;
}

#pedro-ai-app .tq-wb-v3-dock .tq-wb-dock-panel {
  border-radius: 22px !important;
  border-color: var(--tq3-line) !important;
  background: rgba(255,255,255,.95) !important;
  box-shadow: 0 12px 30px rgba(16,24,40,.07) !important;
}

#pedro-ai-app .tq-wb-v3-dock .tq-wb-dock-panel summary {
  min-height: 54px !important;
  padding: 14px 15px !important;
}

#pedro-ai-app .tq-wb-v3-intelligence {
  border-color: rgba(108,92,231,.24) !important;
  box-shadow: 0 18px 42px rgba(108,92,231,.09), 0 10px 26px rgba(16,24,40,.06) !important;
}

#pedro-ai-app .tq-wb-v3-intelligence summary {
  background:
    radial-gradient(circle at 90% 0, rgba(255,255,255,.20), transparent 34%),
    linear-gradient(135deg, #101828, #3b1015 62%, #6C5CE7 140%) !important;
}

#pedro-ai-app .tq-wb-v3 .tq-wb-studio {
  gap: 12px !important;
  padding: 14px !important;
  background: linear-gradient(180deg, #fff 0%, #fff8f8 56%, var(--bg) 100%) !important;
}

#pedro-ai-app .tq-wb-v3 .tq-wb-studio::before {
  order: -2;
  content: "Teeqo Intelligence";
}

#pedro-ai-app .tq-wb-v3 .tq-wb-ai-head {
  order: -1;
}

#pedro-ai-app .tq-wb-v3 #tq-wb-ai-prompt {
  min-height: 96px !important;
  border-radius: 18px !important;
  font-size: 13px !important;
}

#pedro-ai-app .tq-wb-v3 .tq-wb-level-row {
  justify-content: space-between !important;
  gap: 6px !important;
}

#pedro-ai-app .tq-wb-v3 .tq-wb-level-row label {
  flex: 1 1 auto !important;
  justify-content: center !important;
}

#pedro-ai-app .tq-wb-v3 .tq-wb-lesson-hero {
  order: 3;
  margin: 0 !important;
}

#pedro-ai-app .tq-wb-v3 .tq-wb-studio-modes-four {
  order: 4;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
}

#pedro-ai-app .tq-wb-v3 .tq-wb-ai-convert {
  grid-column: 1 / -1 !important;
}

#pedro-ai-app .tq-wb-v3 .tq-wb-studio-note {
  order: 5;
}

#pedro-ai-app .tq-wb-v3 #tq-wb-ai-result {
  order: 6;
}

#pedro-ai-app .tq-wb-v3-assets .tq-wb-elements-v6203 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  max-height: none !important;
}

#pedro-ai-app .tq-wb-v3-assets .tq-wb-elements-v6203 button {
  min-height: 60px !important;
  border-radius: 18px !important;
}

#pedro-ai-app .tq-wb-v3-assets .tq-wb-elements-v6203 button b {
  font-size: 12.5px !important;
}

#pedro-ai-app .tq-wb-v3-assets .tq-wb-elements-v6203 button small {
  font-size: 9.8px !important;
}

#pedro-ai-app .tq-wb-v3-stamps .tq-whiteboard-quickbar {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0,1fr)) !important;
}

#pedro-ai-app .tq-wb-v3-stamps .tq-wb-stamp {
  width: 100% !important;
  height: 36px !important;
}

#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3.tq-wb-dock-hidden .tq-wb-v3-workspace,
#pedro-ai-app .tq-wb-v3.tq-wb-dock-hidden .tq-wb-v3-workspace {
  grid-template-columns: 92px minmax(0, 1fr) !important;
}

#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3.tq-wb-dock-hidden .tq-wb-v3-dock,
#pedro-ai-app .tq-wb-v3.tq-wb-dock-hidden .tq-wb-v3-dock {
  display: none !important;
}

#pedro-ai-app .tq-wb-v3 .tq-whiteboard-library {
  right: 18px !important;
  top: 82px !important;
  border-radius: 24px !important;
}

@media (max-width: 1180px) {
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-workspace,
  #pedro-ai-app .tq-wb-v3-workspace {
    grid-template-columns: 88px minmax(0, 1fr) minmax(300px, 350px) !important;
  }

  #pedro-ai-app .tq-wb-v3-brand small {
    max-width: 34ch;
  }
}

@media (max-width: 920px) {
  #pedro-ai-app .tq-wb-v3-topbar,
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-topbar {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  #pedro-ai-app .tq-wb-v3-actions {
    justify-content: flex-start !important;
    overflow-x: auto !important;
    padding-bottom: 2px !important;
  }

  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-workspace,
  #pedro-ai-app .tq-wb-v3-workspace {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(360px, 1fr) minmax(280px, 38vh) !important;
    overflow: hidden !important;
  }

  #pedro-ai-app .tq-wb-v3-rail {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
  }

  #pedro-ai-app .tq-wb-v3-rail-card {
    min-width: max-content;
    grid-auto-flow: column;
    align-items: center;
  }

  #pedro-ai-app .tq-wb-v3-tools {
    grid-template-columns: repeat(8, 34px) !important;
  }

  #pedro-ai-app .tq-wb-v3-colors {
    grid-template-columns: repeat(6, 24px) !important;
  }

  #pedro-ai-app .tq-wb-v3-settings-card {
    min-width: 235px;
    grid-template-columns: 1fr 120px;
    align-items: center;
  }

  #pedro-ai-app .tq-wb-v3-zoom-card {
    grid-template-columns: repeat(3, 42px) !important;
  }

  #pedro-ai-app .tq-wb-v3-canvas-head {
    display: none;
  }

  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-stage {
    min-height: 0 !important;
  }

  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-dock,
  #pedro-ai-app .tq-wb-v3-dock {
    height: auto !important;
    max-height: none !important;
    padding-bottom: 150px !important;
  }

  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3.tq-wb-dock-hidden .tq-wb-v3-workspace,
  #pedro-ai-app .tq-wb-v3.tq-wb-dock-hidden .tq-wb-v3-workspace {
    grid-template-rows: auto minmax(0, 1fr) !important;
  }
}

@media (max-width: 560px) {
  #pedro-ai-app .tq-wb-v3-brand small {
    display: none;
  }

  #pedro-ai-app .tq-wb-v3-actions {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: 100% !important;
  }

  #pedro-ai-app .tq-wb-v3-actions .tq-wb-action-btn {
    width: 100% !important;
    min-width: 0 !important;
  }

  #pedro-ai-app .tq-wb-v3-actions .tq-wb-save-status {
    grid-column: 1 / -1 !important;
    max-width: none !important;
    min-height: 14px !important;
  }

  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-workspace,
  #pedro-ai-app .tq-wb-v3-workspace {
    grid-template-rows: auto minmax(330px, 1fr) minmax(300px, 42vh) !important;
    gap: 10px !important;
  }

  #pedro-ai-app .tq-wb-v3-rail-card {
    padding: 8px;
    border-radius: 18px;
  }

  #pedro-ai-app .tq-wb-v3-tools {
    grid-template-columns: repeat(8, 32px) !important;
  }

  #pedro-ai-app .tq-wb-v3-tools .tq-wb-tool {
    height: 32px !important;
  }

  #pedro-ai-app .tq-wb-v3-assets .tq-wb-elements-v6203,
  #pedro-ai-app .tq-wb-v3 .tq-wb-studio-modes-four {
    grid-template-columns: 1fr !important;
  }

  #pedro-ai-app .tq-wb-v3-stamps .tq-whiteboard-quickbar {
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  }
}

/* v6.43.1 — Responsive stability for the rebuilt whiteboard shell. */
@media (max-width: 920px) {
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-workspace,
  #pedro-ai-app .tq-wb-v3-workspace {
    grid-template-rows: minmax(86px, auto) minmax(360px, 1fr) minmax(310px, 40vh) !important;
  }

  #pedro-ai-app .tq-wb-v3-rail {
    min-height: 86px !important;
    height: auto !important;
    align-items: stretch !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  #pedro-ai-app .tq-wb-v3-rail-card {
    min-height: 72px !important;
    min-width: max-content !important;
  }

  #pedro-ai-app .tq-wb-v3-canvas-zone,
  #pedro-ai-app .tq-wb-v3-stage {
    min-height: 0 !important;
  }

  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-dock,
  #pedro-ai-app .tq-wb-v3-dock {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    padding-bottom: 24px !important;
    overscroll-behavior: contain !important;
    overflow-y: auto !important;
  }

  #pedro-ai-app .tq-wb-v3-intelligence {
    flex: 0 0 auto !important;
  }

  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3.tq-wb-dock-hidden .tq-wb-v3-workspace,
  #pedro-ai-app .tq-wb-v3.tq-wb-dock-hidden .tq-wb-v3-workspace {
    grid-template-rows: minmax(86px, auto) minmax(360px, 1fr) !important;
  }
}

/* v6.43.2 — Compact layout: keep every major control visible without clipping. */
@media (min-width: 641px) and (max-width: 920px) {
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-workspace,
  #pedro-ai-app .tq-wb-v3-workspace {
    grid-template-columns: 94px minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) minmax(220px, 34vh) !important;
    gap: 10px !important;
    overflow: hidden !important;
  }

  #pedro-ai-app .tq-wb-v3-rail {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-height: 0 !important;
    height: 100% !important;
    flex-direction: column !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  #pedro-ai-app .tq-wb-v3-rail-card {
    min-height: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    grid-auto-flow: row !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }

  #pedro-ai-app .tq-wb-v3-tools {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #pedro-ai-app .tq-wb-v3-colors {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  #pedro-ai-app .tq-wb-v3-settings-card,
  #pedro-ai-app .tq-wb-v3-zoom-card {
    grid-template-columns: 1fr !important;
    min-width: 0 !important;
  }

  #pedro-ai-app .tq-wb-v3-canvas-zone {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-height: 0 !important;
  }

  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-stage,
  #pedro-ai-app .tq-wb-v3-stage {
    min-height: 0 !important;
    height: 100% !important;
  }

  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-dock,
  #pedro-ai-app .tq-wb-v3-dock {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    height: 100% !important;
    max-height: 100% !important;
    padding-right: 4px !important;
    padding-bottom: 12px !important;
    overflow-y: auto !important;
  }

  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3.tq-wb-dock-hidden .tq-wb-v3-workspace,
  #pedro-ai-app .tq-wb-v3.tq-wb-dock-hidden .tq-wb-v3-workspace {
    grid-template-columns: 94px minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
  }
}

@media (max-width: 640px) {
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-workspace,
  #pedro-ai-app .tq-wb-v3-workspace {
    grid-template-rows: 88px minmax(240px, 1fr) minmax(210px, 34vh) !important;
    overflow-y: auto !important;
  }

  #pedro-ai-app .tq-wb-v3-rail {
    height: 88px !important;
    min-height: 88px !important;
  }

  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-dock,
  #pedro-ai-app .tq-wb-v3-dock {
    height: 100% !important;
    max-height: 100% !important;
    padding-bottom: 12px !important;
    overflow-y: auto !important;
  }
}

@media (max-width: 560px) {
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-workspace,
  #pedro-ai-app .tq-wb-v3-workspace {
    grid-template-rows: minmax(92px, auto) minmax(330px, 1fr) minmax(310px, 42vh) !important;
  }

  #pedro-ai-app .tq-wb-v3-rail {
    min-height: 92px !important;
  }

  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3.tq-wb-dock-hidden .tq-wb-v3-workspace,
  #pedro-ai-app .tq-wb-v3.tq-wb-dock-hidden .tq-wb-v3-workspace {
    grid-template-rows: minmax(92px, auto) minmax(330px, 1fr) !important;
  }
}

/* v6.44.0 — Classroom-friendly command bar and unified element system. */
#pedro-ai-app .tq-wb-v3-topbar,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-topbar {
  grid-template-columns: minmax(300px, 1fr) minmax(430px, auto) !important;
  gap: 14px !important;
  padding: 10px !important;
  border-radius: 22px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,251,255,.96)) !important;
  box-shadow: 0 14px 34px rgba(16,24,40,.075) !important;
}

#pedro-ai-app .tq-wb-v3-classroom-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
}

#pedro-ai-app .tq-wb-v3-brand {
  gap: 12px !important;
}

#pedro-ai-app .tq-wb-v3-brand-mark {
  width: 52px !important;
  height: 52px !important;
  flex-basis: 52px !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, #fff 0%, #f4f2ff 100%) !important;
  border: 1px solid rgba(108,92,231,.18) !important;
  color: #5546D6 !important;
  font-size: 11px !important;
  letter-spacing: .02em !important;
  box-shadow: 0 12px 24px rgba(108,92,231,.10) !important;
}

#pedro-ai-app .tq-wb-v3-brand .tq-wb-v3-kicker {
  display: block;
  margin-bottom: 2px;
  color: #2563eb;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#pedro-ai-app .tq-wb-v3-brand strong {
  font-size: 19px !important;
  letter-spacing: -.02em !important;
}

#pedro-ai-app .tq-wb-v3-brand small {
  max-width: 52ch !important;
  color: #52657c !important;
  font-size: 12px !important;
  font-weight: 750 !important;
}

#pedro-ai-app .tq-wb-v3-lesson-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

#pedro-ai-app .tq-wb-v3-lesson-chips span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 6px 9px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(37,99,235,.14);
  color: #1f4fb8;
  font-size: 10px;
  font-weight: 900;
  box-shadow: 0 6px 14px rgba(37,99,235,.055);
}

#pedro-ai-app .tq-wb-v3-actions {
  justify-content: flex-end !important;
  gap: 7px !important;
  padding: 6px !important;
  border: 1px solid rgba(16,24,40,.08) !important;
  border-radius: 18px !important;
  background: rgba(248,250,252,.90) !important;
}

#pedro-ai-app .tq-wb-v3-actions .tq-wb-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: auto !important;
  min-width: 44px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 10px !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

#pedro-ai-app .tq-wb-v3-actions .tq-wb-action-icon {
  display: inline-grid;
  place-items: center;
  min-width: 16px;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
}

#pedro-ai-app .tq-wb-v3-actions .tq-wb-action-label {
  display: inline-block;
  line-height: 1;
}

#pedro-ai-app .tq-wb-v3-actions .tq-wb-primary-action {
  background: #6C5CE7 !important;
  border-color: #6C5CE7 !important;
  color: #fff !important;
}

#pedro-ai-app .tq-wb-v3-actions .tq-wb-toggle-dock-btn.is-active,
#pedro-ai-app .tq-wb-v3-actions .tq-wb-toggle-dock-btn[aria-pressed="true"] {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #fff !important;
}

#pedro-ai-app .tq-wb-v3-actions .tq-wb-danger-action {
  background: #f4f2ff !important;
  border-color: rgba(108,92,231,.18) !important;
}

#pedro-ai-app .tq-wb-v3-actions .tq-wb-save-status {
  min-width: 0 !important;
  max-width: 96px !important;
  padding: 0 4px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

#pedro-ai-app .tq-wb-v3 .tq-wb-studio::before {
  width: max-content;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(108,92,231,.14);
  color: #5546D6;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}

#pedro-ai-app .tq-wb-v3-assets .tq-wb-elements-v6203 {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

#pedro-ai-app .tq-wb-v3-element-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border-radius: 20px;
  border: 1px solid rgba(16,24,40,.09);
  background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

#pedro-ai-app .tq-wb-v3-group-label {
  grid-column: 1 / -1;
  color: #52657c;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#pedro-ai-app .tq-wb-v3-assets .tq-wb-elements-v6203 button {
  align-items: flex-start !important;
  justify-content: center !important;
  min-height: 54px !important;
  padding: 10px 11px !important;
  border-radius: 15px !important;
  background: #fff !important;
  border: 1px solid rgba(16,24,40,.09) !important;
  box-shadow: 0 7px 16px rgba(16,24,40,.045) !important;
  text-align: left !important;
}

#pedro-ai-app .tq-wb-v3-assets .tq-wb-elements-v6203 button:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(37,99,235,.22) !important;
  box-shadow: 0 12px 22px rgba(37,99,235,.08) !important;
}

#pedro-ai-app .tq-wb-v3-assets .tq-wb-elements-v6203 button b {
  color: #101828 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  line-height: 1.12 !important;
}

#pedro-ai-app .tq-wb-v3-assets .tq-wb-elements-v6203 button small {
  margin-top: 3px !important;
  color: #667085 !important;
  font-size: 9.5px !important;
  font-weight: 750 !important;
  line-height: 1.15 !important;
}

@media (max-width: 1180px) {
  #pedro-ai-app .tq-wb-v3-topbar,
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-topbar {
    grid-template-columns: 1fr !important;
  }

  #pedro-ai-app .tq-wb-v3-actions {
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin;
  }
}

@media (max-width: 920px) {
  #pedro-ai-app .tq-wb-v3-classroom-head {
    align-items: flex-start;
  }

  #pedro-ai-app .tq-wb-v3-lesson-chips {
    display: none;
  }

  #pedro-ai-app .tq-wb-v3-actions {
    flex-wrap: nowrap !important;
    padding-bottom: 7px !important;
  }

  #pedro-ai-app .tq-wb-v3-actions .tq-wb-action-btn {
    min-width: 70px !important;
  }

  #pedro-ai-app .tq-wb-v3-actions .tq-wb-compact-action {
    min-width: 82px !important;
  }

  #pedro-ai-app .tq-wb-v3-actions .tq-wb-compact-action .tq-wb-action-label {
    display: inline-block;
  }
}

@media (max-width: 560px) {
  #pedro-ai-app .tq-wb-v3-brand-mark {
    width: 44px !important;
    height: 44px !important;
    flex-basis: 44px !important;
    border-radius: 15px !important;
  }

  #pedro-ai-app .tq-wb-v3-actions {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    overflow: visible !important;
  }

  #pedro-ai-app .tq-wb-v3-actions .tq-wb-action-btn {
    min-width: 0 !important;
    padding: 0 6px !important;
  }

  #pedro-ai-app .tq-wb-v3-actions .tq-wb-action-label {
    display: none !important;
  }

  #pedro-ai-app .tq-wb-v3-element-group {
    grid-template-columns: 1fr !important;
  }
}

/* v6.45.0 — Aula viva: warmer, more inviting whiteboard for primary and secondary teachers. */
#pedro-ai-app .tq-wb-v3 {
  --tq-school-ink: var(--text);
  --tq-school-muted: #5d6b82;
  --tq-school-paper: #fffdf7;
  --tq-school-blue: #2563eb;
  --tq-school-sky: #38bdf8;
  --tq-school-red: #6C5CE7;
  --tq-school-green: #10b981;
  --tq-school-yellow: #fbbf24;
  --tq-school-pink: #ff5b7f;
  --tq-school-line: rgba(23,32,51,.12);
  color: var(--tq-school-ink);
}

#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-shell {
  background:
    linear-gradient(135deg, rgba(255,246,214,.82) 0%, rgba(239,248,255,.92) 44%, rgba(255,245,248,.88) 100%) !important;
}

#pedro-ai-app .tq-wb-v3-topbar,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-topbar {
  padding: 11px !important;
  border: 1px solid rgba(23,32,51,.10) !important;
  border-radius: 28px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,250,239,.96)) !important;
  box-shadow:
    0 18px 42px rgba(23,32,51,.10),
    inset 0 1px 0 rgba(255,255,255,.90) !important;
}

#pedro-ai-app .tq-wb-v3-topbar::before,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-topbar::before {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  top: -1px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--tq-school-red), var(--tq-school-yellow), var(--tq-school-green), var(--tq-school-blue));
}

#pedro-ai-app .tq-wb-v3-classroom-head {
  padding: 1px 2px 0 !important;
}

#pedro-ai-app .tq-wb-v3-brand-mark {
  width: 56px !important;
  height: 56px !important;
  flex-basis: 56px !important;
  border: 0 !important;
  border-radius: 20px !important;
  background:
    linear-gradient(135deg, #6C5CE7 0%, #ff6b57 52%, #fbbf24 120%) !important;
  color: #fff !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  transform: rotate(-2deg);
  box-shadow: 0 16px 30px rgba(108,92,231,.28) !important;
}

#pedro-ai-app .tq-wb-v3-brand .tq-wb-v3-kicker {
  display: inline-flex !important;
  align-items: center;
  width: max-content;
  margin-bottom: 4px !important;
  padding: 4px 8px;
  border-radius: 999px;
  background: #fff4cc;
  color: #9a3412 !important;
  border: 1px solid rgba(251,191,36,.40);
  font-size: 9.5px !important;
}

#pedro-ai-app .tq-wb-v3-brand strong {
  color: var(--text) !important;
  font-size: 21px !important;
  letter-spacing: -.03em !important;
}

#pedro-ai-app .tq-wb-v3-brand small {
  color: var(--tq-school-muted) !important;
  font-size: 12.5px !important;
  font-weight: 850 !important;
}

#pedro-ai-app .tq-wb-v3-lesson-chips {
  gap: 7px !important;
}

#pedro-ai-app .tq-wb-v3-lesson-chips span {
  min-height: 32px !important;
  padding: 7px 10px !important;
  border: 0 !important;
  color: var(--text) !important;
  font-size: 10.5px !important;
  box-shadow: 0 10px 18px rgba(23,32,51,.08) !important;
}

#pedro-ai-app .tq-wb-v3-lesson-chips span:nth-child(1) {
  background: #dbeafe !important;
}

#pedro-ai-app .tq-wb-v3-lesson-chips span:nth-child(2) {
  background: #dcfce7 !important;
}

#pedro-ai-app .tq-wb-v3-lesson-chips span:nth-child(3) {
  background: #ffe4e6 !important;
}

#pedro-ai-app .tq-wb-v3-actions {
  border: 1px solid rgba(23,32,51,.10) !important;
  background: rgba(255,255,255,.74) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.90), 0 10px 22px rgba(23,32,51,.06) !important;
}

#pedro-ai-app .tq-wb-v3-actions .tq-wb-action-btn {
  min-height: 38px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(23,32,51,.10) !important;
  background: #fff !important;
  color: var(--text) !important;
  box-shadow: 0 6px 0 rgba(23,32,51,.035), 0 9px 18px rgba(23,32,51,.05) !important;
}

#pedro-ai-app .tq-wb-v3-actions .tq-wb-action-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 0 rgba(23,32,51,.035), 0 14px 26px rgba(23,32,51,.09) !important;
}

#pedro-ai-app .tq-wb-v3-actions .tq-wb-primary-action {
  background: linear-gradient(135deg, #6C5CE7, #ff6b57) !important;
  border-color: transparent !important;
  color: #fff !important;
}

#pedro-ai-app .tq-wb-v3-actions .tq-wb-toggle-dock-btn.is-active,
#pedro-ai-app .tq-wb-v3-actions .tq-wb-toggle-dock-btn[aria-pressed="true"] {
  background: linear-gradient(135deg, #2563eb, #38bdf8) !important;
  border-color: transparent !important;
  color: #fff !important;
}

#pedro-ai-app .tq-wb-v3-actions .tq-wb-danger-action {
  background: #FEF2F2 !important;
  color: #DC2626 !important;
}

#pedro-ai-app .tq-wb-v3-workspace {
  gap: 14px !important;
}

#pedro-ai-app .tq-wb-v3-rail {
  padding: 4px !important;
}

#pedro-ai-app .tq-wb-v3-rail-card {
  position: relative;
  border: 1px solid rgba(23,32,51,.10) !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.88) !important;
  box-shadow: 0 12px 22px rgba(23,32,51,.07) !important;
}

#pedro-ai-app .tq-wb-v3-tool-card {
  background: linear-gradient(180deg, #fff 0%, #eff6ff 100%) !important;
}

#pedro-ai-app .tq-wb-v3-color-card {
  background: linear-gradient(180deg, #fff 0%, #fff7ed 100%) !important;
}

#pedro-ai-app .tq-wb-v3-settings-card {
  background: linear-gradient(180deg, #fff 0%, #ecfdf5 100%) !important;
}

#pedro-ai-app .tq-wb-v3-zoom-card {
  background: linear-gradient(180deg, #fff 0%, #fefce8 100%) !important;
}

#pedro-ai-app .tq-wb-v3-rail-label {
  color: var(--text-2) !important;
  font-size: 10px !important;
  letter-spacing: .08em !important;
}

#pedro-ai-app .tq-wb-v3-tools .tq-wb-tool {
  height: 39px !important;
  min-height: 39px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(23,32,51,.12) !important;
  background: #fff !important;
  font-size: 17px !important;
  box-shadow: 0 6px 0 rgba(23,32,51,.035), 0 10px 16px rgba(23,32,51,.06) !important;
}

#pedro-ai-app .tq-wb-v3-tools .tq-wb-tool.active {
  background: linear-gradient(135deg, var(--text), #2563eb) !important;
  color: #fff !important;
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 10px 0 rgba(37,99,235,.12), 0 16px 26px rgba(37,99,235,.24) !important;
}

#pedro-ai-app .tq-wb-v3-colors .tq-wb-color {
  width: 23px !important;
  height: 23px !important;
  border: 3px solid #fff !important;
  box-shadow: 0 0 0 1px rgba(23,32,51,.12), 0 8px 14px rgba(23,32,51,.12) !important;
}

#pedro-ai-app .tq-wb-v3-colors .tq-wb-color.active {
  transform: scale(1.16);
  box-shadow: 0 0 0 3px rgba(37,99,235,.18), 0 8px 16px rgba(37,99,235,.18) !important;
}

#pedro-ai-app .tq-wb-v3-settings-card .tq-wb-bg,
#pedro-ai-app .tq-wb-v3-zoom-card .pedro-btn-secondary {
  border-radius: 15px !important;
  border-color: rgba(23,32,51,.10) !important;
  background: #fff !important;
  box-shadow: 0 6px 0 rgba(23,32,51,.03) !important;
}

#pedro-ai-app .tq-wb-v3-canvas-head {
  border: 0 !important;
  background: linear-gradient(90deg, rgba(219,234,254,.96), rgba(220,252,231,.94), rgba(255,244,204,.94)) !important;
  box-shadow: 0 10px 22px rgba(23,32,51,.06) !important;
}

#pedro-ai-app .tq-wb-v3-status-pills span {
  border: 0 !important;
  background: rgba(255,255,255,.82) !important;
  color: var(--text) !important;
}

#pedro-ai-app .tq-wb-v3-stage {
  border: 4px solid #fff !important;
  outline: 1px solid rgba(23,32,51,.12);
  border-radius: 32px !important;
  background-color: var(--tq-school-paper) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -42px 92px rgba(251,191,36,.055),
    0 26px 60px rgba(23,32,51,.16) !important;
}

#pedro-ai-app .tq-wb-v3 .tq-whiteboard-empty {
  max-width: 360px !important;
  padding: 22px !important;
  border: 2px dashed rgba(37,99,235,.22) !important;
  background: rgba(255,255,255,.82) !important;
  box-shadow: 0 18px 36px rgba(23,32,51,.09) !important;
}

#pedro-ai-app .tq-wb-v3 .tq-whiteboard-empty::before {
  content: "Clase lista";
  display: inline-flex;
  width: max-content;
  margin-bottom: 10px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}

#pedro-ai-app .tq-wb-v3-dock .tq-wb-dock-panel {
  border: 1px solid rgba(23,32,51,.10) !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 16px 30px rgba(23,32,51,.09) !important;
}

#pedro-ai-app .tq-wb-v3-intelligence {
  border: 0 !important;
  background: #fff !important;
  box-shadow: 0 22px 46px rgba(37,99,235,.18), 0 8px 24px rgba(108,92,231,.10) !important;
}

#pedro-ai-app .tq-wb-v3-intelligence summary {
  background:
    linear-gradient(135deg, #2563eb 0%, #38bdf8 46%, #6C5CE7 140%) !important;
  color: #fff !important;
}

#pedro-ai-app .tq-wb-v3-intelligence summary span {
  color: #fff !important;
}

#pedro-ai-app .tq-wb-v3-intelligence summary small {
  color: rgba(255,255,255,.82) !important;
}

#pedro-ai-app .tq-wb-v3 .tq-wb-studio {
  background:
    linear-gradient(180deg, #fff 0%, #f7fbff 45%, #fff8ed 100%) !important;
}

#pedro-ai-app .tq-wb-v3 .tq-wb-studio::before {
  background: #e0f2fe !important;
  border-color: rgba(37,99,235,.18) !important;
  color: #1d4ed8 !important;
}

#pedro-ai-app .tq-wb-v3 #tq-wb-ai-prompt {
  border: 2px solid rgba(37,99,235,.16) !important;
  background: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 10px 18px rgba(37,99,235,.06) !important;
}

#pedro-ai-app .tq-wb-v3 .tq-wb-lesson-hero {
  border: 0 !important;
  /* El degradado acaba en ámbar y el texto blanco se quedaba en 2.06:1.
     El velo oscuro va como primera capa del propio background (se pinta
     ENCIMA del degradado) y sube el punto peor a 5.2:1 sin apagar el
     color de marca. */
  background:
    linear-gradient(100deg, rgba(23,18,51,.10) 0%, rgba(23,18,51,.45) 100%),
    linear-gradient(135deg, #6C5CE7 0%, #ff6b57 52%, #fbbf24 130%) !important;
  color: #fff !important;
  box-shadow: 0 16px 30px rgba(108,92,231,.22) !important;
}

#pedro-ai-app .tq-wb-v3 .tq-wb-studio-modes-four .tq-wb-ai-btn {
  min-height: 48px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(37,99,235,.12) !important;
  background: #fff !important;
  color: var(--text) !important;
  box-shadow: 0 8px 16px rgba(23,32,51,.055) !important;
}

#pedro-ai-app .tq-wb-v3 .tq-wb-ai-convert {
  background: #eff6ff !important;
  border-color: rgba(37,99,235,.18) !important;
}

#pedro-ai-app .tq-wb-v3-element-group {
  position: relative;
  overflow: hidden;
  padding: 12px !important;
  border: 0 !important;
  border-radius: 24px !important;
  box-shadow: 0 14px 26px rgba(23,32,51,.07) !important;
}

#pedro-ai-app .tq-wb-v3-element-group::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--tq-group-accent, #2563eb);
}

#pedro-ai-app .tq-wb-v3-element-group:nth-child(1) {
  --tq-group-accent: #2563eb;
  background: linear-gradient(180deg, #eff6ff 0%, #fff 100%) !important;
}

#pedro-ai-app .tq-wb-v3-element-group:nth-child(2) {
  --tq-group-accent: #10b981;
  background: linear-gradient(180deg, #ecfdf5 0%, #fff 100%) !important;
}

#pedro-ai-app .tq-wb-v3-element-group:nth-child(3) {
  --tq-group-accent: #f59e0b;
  background: linear-gradient(180deg, #fffbeb 0%, #fff 100%) !important;
}

#pedro-ai-app .tq-wb-v3-element-group:nth-child(4) {
  --tq-group-accent: #6C5CE7;
  background: linear-gradient(180deg, #F4F2FD 0%, #fff 100%) !important;
}

#pedro-ai-app .tq-wb-v3-group-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text) !important;
  font-size: 10.5px !important;
}

#pedro-ai-app .tq-wb-v3-group-label::before {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 9px;
  background: var(--tq-group-accent, #2563eb);
  color: #fff;
  font-size: 12px;
}

#pedro-ai-app .tq-wb-v3-element-group:nth-child(1) .tq-wb-v3-group-label::before {
  content: "✎";
}

#pedro-ai-app .tq-wb-v3-element-group:nth-child(2) .tq-wb-v3-group-label::before {
  content: "✓";
}

#pedro-ai-app .tq-wb-v3-element-group:nth-child(3) .tq-wb-v3-group-label::before {
  content: "★";
}

#pedro-ai-app .tq-wb-v3-element-group:nth-child(4) .tq-wb-v3-group-label::before {
  content: "↗";
}

#pedro-ai-app .tq-wb-v3-assets .tq-wb-elements-v6203 button {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: 10px !important;
  align-items: center !important;
  min-height: 62px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 6px 0 rgba(23,32,51,.035), 0 12px 18px rgba(23,32,51,.06) !important;
}

#pedro-ai-app .tq-wb-v3-assets .tq-wb-elements-v6203 button::before {
  content: "+";
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 14px;
  background: #eff6ff;
  background: color-mix(in srgb, var(--tq-group-accent, #2563eb) 14%, #fff);
  color: var(--tq-group-accent, #2563eb);
  font-size: 15px;
  font-weight: 950;
}

#pedro-ai-app .tq-wb-v3-assets .tq-add-objective::before { content: "🎯" !important; }
#pedro-ai-app .tq-wb-v3-assets .tq-add-title::before { content: "Aa" !important; }
#pedro-ai-app .tq-wb-v3-assets .tq-add-note::before { content: "📝" !important; }
#pedro-ai-app .tq-wb-v3-assets .tq-add-writing-box::before { content: "✍" !important; }
#pedro-ai-app .tq-wb-v3-assets .tq-add-timer::before { content: "⏱" !important; }
#pedro-ai-app .tq-wb-v3-assets .tq-add-card::before { content: "Q/A" !important; font-size: 11px !important; }
#pedro-ai-app .tq-wb-v3-assets .tq-add-vocab::before { content: "🖼" !important; }
#pedro-ai-app .tq-wb-v3-assets .tq-add-verbs::before { content: "↻" !important; }
#pedro-ai-app .tq-wb-v3-assets .tq-add-transformer::before { content: "⚡" !important; }
#pedro-ai-app .tq-wb-v3-assets .tq-add-builder::before { content: "▦" !important; }
#pedro-ai-app .tq-wb-v3-assets .tq-add-pronun::before { content: "🎙" !important; }
#pedro-ai-app .tq-wb-v3-assets .tq-add-spinner::before { content: "🎲" !important; }
#pedro-ai-app .tq-wb-v3-assets .tq-add-cloud::before { content: "☁" !important; }
#pedro-ai-app .tq-wb-v3-assets .tq-add-traffic::before { content: "🚦" !important; }
#pedro-ai-app .tq-wb-v3-assets .tq-add-exit::before { content: "✓" !important; }
#pedro-ai-app .tq-wb-v3-assets .tq-add-collab::before { content: "👥" !important; }
#pedro-ai-app .tq-wb-v3-assets .tq-add-chat::before { content: "💬" !important; }
#pedro-ai-app .tq-wb-v3-assets .tq-add-image::before { content: "img" !important; font-size: 10px !important; text-transform: uppercase; }
#pedro-ai-app .tq-wb-v3-assets .tq-add-youtube::before { content: "▶" !important; }
#pedro-ai-app .tq-wb-v3-assets .tq-add-library::before { content: "▣" !important; }

#pedro-ai-app .tq-wb-v3-assets .tq-wb-elements-v6203 button b,
#pedro-ai-app .tq-wb-v3-assets .tq-wb-elements-v6203 button small {
  grid-column: 2;
}

#pedro-ai-app .tq-wb-v3-assets .tq-wb-elements-v6203 button b {
  font-size: 12.8px !important;
}

#pedro-ai-app .tq-wb-v3-assets .tq-wb-elements-v6203 button small {
  font-size: 10px !important;
}

#pedro-ai-app .tq-wb-v3-stamps .tq-wb-stamp {
  border-radius: 15px !important;
  background: #fff !important;
  box-shadow: 0 7px 14px rgba(23,32,51,.07) !important;
}

@media (max-width: 1180px) {
  #pedro-ai-app .tq-wb-v3-lesson-chips {
    display: flex !important;
  }
}

@media (min-width: 641px) and (max-width: 920px) {
  #pedro-ai-app .tq-wb-v3-topbar,
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-topbar {
    gap: 8px !important;
    padding: 8px !important;
  }

  #pedro-ai-app .tq-wb-v3-brand-mark {
    width: 48px !important;
    height: 48px !important;
    flex-basis: 48px !important;
    border-radius: 18px !important;
  }

  #pedro-ai-app .tq-wb-v3-brand strong {
    font-size: 19px !important;
  }

  #pedro-ai-app .tq-wb-v3-brand small {
    font-size: 11.5px !important;
  }

  #pedro-ai-app .tq-wb-v3-lesson-chips span {
    min-height: 27px !important;
    padding: 5px 8px !important;
  }

  #pedro-ai-app .tq-wb-v3-actions {
    padding: 5px !important;
  }

  #pedro-ai-app .tq-wb-v3-actions .tq-wb-action-btn {
    min-height: 36px !important;
    height: 36px !important;
  }

  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-workspace,
  #pedro-ai-app .tq-wb-v3-workspace {
    grid-template-columns: 104px minmax(0, 1fr) !important;
  }

  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3.tq-wb-dock-hidden .tq-wb-v3-workspace,
  #pedro-ai-app .tq-wb-v3.tq-wb-dock-hidden .tq-wb-v3-workspace {
    grid-template-columns: 104px minmax(0, 1fr) !important;
  }
}

@media (max-width: 720px) {
  #pedro-ai-app .tq-wb-v3-lesson-chips {
    display: none !important;
  }
}

@media (max-width: 560px) {
  #pedro-ai-app .tq-wb-v3-brand-mark {
    transform: none;
  }

  #pedro-ai-app .tq-wb-v3-assets .tq-wb-elements-v6203 button {
    grid-template-columns: 32px minmax(0, 1fr) !important;
  }
}

/* v6.45.1 — Final specificity wins over the legacy v2 dock header. */
#pedro-ai-app .tq-wb-v3.tq-wb-v2 .tq-wb-v3-dock .tq-wb-v3-intelligence.tq-wb-dock-ai > summary,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3.tq-wb-v2 .tq-wb-v3-dock .tq-wb-v3-intelligence.tq-wb-dock-ai > summary {
  background: linear-gradient(135deg, #2563eb 0%, #38bdf8 46%, #6C5CE7 145%) !important;
  color: #fff !important;
}

#pedro-ai-app .tq-wb-v3.tq-wb-v2 .tq-wb-v3-dock .tq-wb-v3-intelligence.tq-wb-dock-ai > summary span,
#pedro-ai-app .tq-wb-v3.tq-wb-v2 .tq-wb-v3-dock .tq-wb-v3-intelligence.tq-wb-dock-ai > summary small {
  color: #fff !important;
}

/* v6.46.0 — Remove redundant canvas header and refine the teaching workspace. */
#pedro-ai-app .tq-wb-v3-canvas-head,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-canvas-head {
  display: none !important;
}

#pedro-ai-app .tq-wb-v3-canvas-zone {
  gap: 0 !important;
}

#pedro-ai-app .tq-wb-v3-actions .tq-wb-toggle-dock-btn {
  min-width: 118px !important;
  background: linear-gradient(135deg, #2563eb, #22c55e) !important;
  border-color: transparent !important;
  color: #fff !important;
}

#pedro-ai-app .tq-wb-v3-actions .tq-wb-toggle-dock-btn .tq-wb-action-icon {
  font-size: 15px !important;
}

#pedro-ai-app .tq-wb-v3-actions .tq-wb-toggle-dock-btn[aria-pressed="false"] {
  background: #fff !important;
  border-color: rgba(37,99,235,.22) !important;
  color: #1d4ed8 !important;
}

#pedro-ai-app .tq-wb-v3-stage {
  border-width: 3px !important;
  border-color: rgba(255,255,255,.98) !important;
  outline-color: rgba(37,99,235,.12) !important;
  background-color: #fffef9 !important;
}

#pedro-ai-app .tq-wb-v3 .tq-whiteboard-empty {
  transform: translateY(-4px);
}

#pedro-ai-app .tq-wb-v3-topbar {
  box-shadow: 0 14px 34px rgba(23,32,51,.085), inset 0 1px 0 rgba(255,255,255,.9) !important;
}

#pedro-ai-app .tq-wb-v3-actions .tq-wb-action-btn {
  box-shadow: 0 5px 0 rgba(23,32,51,.03), 0 8px 16px rgba(23,32,51,.045) !important;
}

#pedro-ai-app .tq-wb-v3-dock .tq-wb-dock-panel {
  border-radius: 24px !important;
}

@media (min-width: 641px) and (max-width: 920px) {
  #pedro-ai-app .tq-wb-v3-topbar,
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-topbar {
    min-height: 0 !important;
    gap: 7px !important;
    padding: 8px 9px !important;
    border-radius: 24px !important;
  }

  #pedro-ai-app .tq-wb-v3-lesson-chips {
    display: none !important;
  }

  #pedro-ai-app .tq-wb-v3-classroom-head {
    min-height: 46px !important;
  }

  #pedro-ai-app .tq-wb-v3-brand-mark {
    width: 46px !important;
    height: 46px !important;
    flex-basis: 46px !important;
  }

  #pedro-ai-app .tq-wb-v3-brand .tq-wb-v3-kicker {
    margin-bottom: 2px !important;
    padding: 3px 7px !important;
  }

  #pedro-ai-app .tq-wb-v3-actions {
    gap: 6px !important;
    padding: 5px !important;
  }

  #pedro-ai-app .tq-wb-v3-actions .tq-wb-action-btn {
    min-height: 35px !important;
    height: 35px !important;
    padding-inline: 9px !important;
  }

  #pedro-ai-app .tq-wb-v3-actions .tq-wb-toggle-dock-btn {
    min-width: 118px !important;
  }

  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-workspace,
  #pedro-ai-app .tq-wb-v3-workspace {
    grid-template-rows: minmax(0, 1fr) minmax(222px, 32vh) !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   v6.47.0 — Whiteboard final polish
   Container-safe header, consistent iconography, compact rail,
   accessible controls and no visual overflow.
   ═══════════════════════════════════════════════════════════ */
#pedro-ai-app .tq-wb-v3-shell {
  container-type: inline-size;
  container-name: tq-whiteboard;
}

#pedro-ai-app .tq-wb-v3,
#pedro-ai-app .tq-wb-v3 button,
#pedro-ai-app .tq-wb-v3 input,
#pedro-ai-app .tq-wb-v3 select,
#pedro-ai-app .tq-wb-v3 textarea {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

#pedro-ai-app .tq-wb-v3 *,
#pedro-ai-app .tq-wb-v3 *::before,
#pedro-ai-app .tq-wb-v3 *::after {
  box-sizing: border-box;
}

#pedro-ai-app .tq-wb-v3-topbar,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-topbar {
  grid-template-columns: minmax(230px, 1fr) minmax(0, auto) !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  overflow: hidden !important;
}

#pedro-ai-app .tq-wb-v3-classroom-head,
#pedro-ai-app .tq-wb-v3-brand,
#pedro-ai-app .tq-wb-v3-brand-copy {
  min-width: 0 !important;
}

#pedro-ai-app .tq-wb-v3-classroom-head {
  justify-content: flex-start !important;
}

#pedro-ai-app .tq-wb-v3-brand {
  width: 100%;
  align-items: center !important;
}

#pedro-ai-app .tq-wb-v3-brand-mark {
  width: 54px !important;
  height: 54px !important;
  flex: 0 0 54px !important;
  border-radius: 18px !important;
  transform: none !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
  box-shadow: 0 12px 26px rgba(227, 57, 53, .22) !important;
}

#pedro-ai-app .tq-wb-v3-brand .tq-wb-v3-kicker {
  margin-bottom: 3px !important;
  padding: 4px 9px !important;
  font-size: 9px !important;
  line-height: 1 !important;
  letter-spacing: .1em !important;
}

#pedro-ai-app .tq-wb-v3-brand strong {
  display: block !important;
  max-width: 100% !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  color: #121a2a !important;
  font-family: Outfit, Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-size: clamp(19px, 1.55vw, 24px) !important;
  font-weight: 900 !important;
  line-height: 1.02 !important;
  letter-spacing: -.035em !important;
}

#pedro-ai-app .tq-wb-v3-brand small {
  display: block !important;
  max-width: 62ch !important;
  margin-top: 3px !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  color: #5c687c !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

#pedro-ai-app .tq-wb-v3-lesson-chips {
  display: none !important;
}

#pedro-ai-app .tq-wb-v3-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 5px !important;
  overflow: visible !important;
}

#pedro-ai-app .tq-wb-v3-actions .tq-wb-action-btn {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 9px !important;
  border-radius: 12px !important;
  font-size: 10.5px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

#pedro-ai-app .tq-wb-v3-actions .tq-wb-action-icon {
  min-width: 15px !important;
  font-size: 12px !important;
}

#pedro-ai-app .tq-wb-v3-actions .tq-wb-toggle-dock-btn {
  min-width: 0 !important;
}

#pedro-ai-app .tq-wb-v3-actions .tq-wb-save-status {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: 120px !important;
  padding-inline: 3px !important;
}

#pedro-ai-app .tq-wb-v3-actions .tq-wb-save-status:empty {
  display: none !important;
}

#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-workspace,
#pedro-ai-app .tq-wb-v3-workspace {
  grid-template-columns: 120px minmax(0, 1fr) minmax(310px, 380px) !important;
  gap: 12px !important;
  overflow: hidden !important;
}

#pedro-ai-app .tq-wb-v3-rail {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 2px !important;
  gap: 9px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

#pedro-ai-app .tq-wb-v3-rail-card {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  gap: 8px !important;
  padding: 10px !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 9px 20px rgba(23, 32, 51, .065) !important;
}

#pedro-ai-app .tq-wb-v3-rail-label,
#pedro-ai-app .tq-wb-v3-field-label,
#pedro-ai-app .tq-wb-v3-settings-card .tq-wb-field-label {
  color: #46536a !important;
  font-size: 9.5px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
}

#pedro-ai-app .tq-wb-v3-tools,
#pedro-ai-app .tq-wb-v3-colors {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

#pedro-ai-app .tq-wb-v3-tools {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

#pedro-ai-app .tq-wb-v3-tools .tq-wb-tool {
  width: 100% !important;
  min-width: 0 !important;
  height: 40px !important;
  min-height: 40px !important;
  border-radius: 13px !important;
  color: #243149 !important;
  font-size: 0 !important;
  transform: none !important;
  box-shadow: 0 4px 10px rgba(23, 32, 51, .055) !important;
}

#pedro-ai-app .tq-wb-v3-tools .tq-wb-tool:hover {
  border-color: rgba(37, 99, 235, .28) !important;
  background: #f8fbff !important;
  transform: translateY(-1px) !important;
}

#pedro-ai-app .tq-wb-v3-tools .tq-wb-tool.active {
  border-color: var(--text) !important;
  background: var(--text) !important;
  color: #fff !important;
  transform: none !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 7px 15px rgba(23, 32, 51, .18) !important;
}

#pedro-ai-app .tq-wb-v3-tools .tq-wb-tool-icon {
  display: block;
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

#pedro-ai-app .tq-wb-v3-tools .tq-wb-tool:focus-visible,
#pedro-ai-app .tq-wb-v3-colors .tq-wb-color:focus-visible,
#pedro-ai-app .tq-wb-v3-zoom-card button:focus-visible,
#pedro-ai-app .tq-wb-v3-actions button:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .28) !important;
  outline-offset: 2px !important;
}

#pedro-ai-app .tq-wb-v3-colors {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  place-items: center !important;
  gap: 8px 6px !important;
}

#pedro-ai-app .tq-wb-v3-colors .tq-wb-color {
  position: relative !important;
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 3px solid #fff !important;
  border-radius: 999px !important;
  outline: 0 !important;
  transform: none !important;
  background: var(--c) !important;
  box-shadow: 0 0 0 1px rgba(23, 32, 51, .14), 0 5px 10px rgba(23, 32, 51, .1) !important;
}

#pedro-ai-app .tq-wb-v3-colors .tq-wb-color:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 0 0 1px rgba(23, 32, 51, .18), 0 7px 13px rgba(23, 32, 51, .14) !important;
}

#pedro-ai-app .tq-wb-v3-colors .tq-wb-color.active {
  transform: none !important;
  outline: 0 !important;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px var(--text),
    0 6px 12px rgba(23, 32, 51, .14) !important;
}

#pedro-ai-app .tq-wb-v3-settings-card {
  gap: 11px !important;
}

#pedro-ai-app .tq-wb-v3-settings-card .tq-wb-size,
#pedro-ai-app .tq-wb-v3-settings-card .tq-wb-bg-field {
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  gap: 7px !important;
  margin: 0 !important;
}

#pedro-ai-app .tq-wb-v3-settings-card .tq-wb-field-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  min-width: 0 !important;
}

#pedro-ai-app .tq-wb-v3-settings-card .tq-wb-field-head > span,
#pedro-ai-app .tq-wb-v3-settings-card .tq-wb-field-label {
  color: #46536a !important;
  font-size: 9.5px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
}

#pedro-ai-app .tq-wb-v3-settings-card #tq-wb-size-value {
  flex: 0 0 auto !important;
  color: var(--text) !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

#pedro-ai-app .tq-wb-v3-settings-card #tq-wb-size {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  cursor: pointer;
}

#pedro-ai-app .tq-wb-v3-settings-card #tq-wb-size::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #e53935, #ff7a59);
  box-shadow: inset 0 0 0 1px rgba(23, 32, 51, .06);
}

#pedro-ai-app .tq-wb-v3-settings-card #tq-wb-size::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  margin-top: -6px;
  border: 3px solid #fff;
  border-radius: 999px;
  background: var(--text);
  box-shadow: 0 0 0 1px rgba(23, 32, 51, .15), 0 4px 9px rgba(23, 32, 51, .2);
}

#pedro-ai-app .tq-wb-v3-settings-card #tq-wb-size::-moz-range-track {
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #e53935, #ff7a59);
}

#pedro-ai-app .tq-wb-v3-settings-card #tq-wb-size::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border: 3px solid #fff;
  border-radius: 999px;
  background: var(--text);
  box-shadow: 0 0 0 1px rgba(23, 32, 51, .15), 0 4px 9px rgba(23, 32, 51, .2);
}

#pedro-ai-app .tq-wb-v3-settings-card .tq-wb-bg {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 36px !important;
  padding: 0 19px 0 8px !important;
  border-radius: 11px !important;
  color: var(--text) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  background-color: #fff !important;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text) 50%),
    linear-gradient(135deg, var(--text) 50%, transparent 50%) !important;
  background-position:
    calc(100% - 13px) 50%,
    calc(100% - 9px) 50% !important;
  background-size: 4px 4px, 4px 4px !important;
  background-repeat: no-repeat !important;
}

#pedro-ai-app .tq-wb-v3-zoom-card {
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) 30px !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 9px !important;
}

#pedro-ai-app .tq-wb-v3-zoom-card .pedro-btn-secondary {
  width: 100% !important;
  min-width: 0 !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border-radius: 11px !important;
  font-size: 16px !important;
  box-shadow: none !important;
}

#pedro-ai-app .tq-wb-v3-zoom-card .tq-wb-zoom-reset {
  font-size: 10.5px !important;
  letter-spacing: -.02em !important;
}

#pedro-ai-app .tq-wb-v3-zoom-card button:disabled {
  opacity: .42 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

#pedro-ai-app .tq-wb-v3-stage {
  min-width: 0 !important;
  border-radius: 26px !important;
  outline-color: rgba(23, 32, 51, .1) !important;
  box-shadow: 0 18px 42px rgba(23, 32, 51, .12) !important;
}

#pedro-ai-app .tq-wb-v3-dock {
  min-width: 0 !important;
  overflow-x: hidden !important;
}

#pedro-ai-app .tq-wb-v3-dock .tq-wb-dock-panel {
  min-width: 0 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
}

#pedro-ai-app .tq-wb-v3-dock .tq-wb-dock-panel > summary {
  min-width: 0 !important;
  padding: 13px 15px !important;
}

#pedro-ai-app .tq-wb-v3-dock .tq-wb-dock-panel > summary span,
#pedro-ai-app .tq-wb-v3-dock .tq-wb-dock-panel > summary small {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

#pedro-ai-app .tq-wb-v3-assets .tq-wb-elements-v6203 button {
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease !important;
}

#pedro-ai-app .tq-wb-v3-assets .tq-wb-elements-v6203 button:focus-visible,
#pedro-ai-app .tq-wb-v3 .tq-wb-ai-btn:focus-visible,
#pedro-ai-app .tq-wb-v3 .tq-wb-stamp:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .25) !important;
  outline-offset: 2px !important;
}

/* The layout must respond to the app's real width, not only the browser viewport. */
@container tq-whiteboard (max-width: 1180px) {
  #pedro-ai-app .tq-wb-v3-topbar,
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-topbar {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #pedro-ai-app .tq-wb-v3-actions {
    justify-content: flex-start !important;
  }

  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-workspace,
  #pedro-ai-app .tq-wb-v3-workspace {
    grid-template-columns: 116px minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) minmax(230px, 34vh) !important;
  }

  #pedro-ai-app .tq-wb-v3-rail {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  #pedro-ai-app .tq-wb-v3-canvas-zone {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  #pedro-ai-app .tq-wb-v3-dock {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow-y: auto !important;
  }

  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3.tq-wb-dock-hidden .tq-wb-v3-workspace,
  #pedro-ai-app .tq-wb-v3.tq-wb-dock-hidden .tq-wb-v3-workspace {
    grid-template-columns: 116px minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
  }
}

@container tq-whiteboard (max-width: 760px) {
  #pedro-ai-app .tq-wb-v3-brand-mark {
    width: 48px !important;
    height: 48px !important;
    flex-basis: 48px !important;
  }

  #pedro-ai-app .tq-wb-v3-brand strong {
    font-size: 19px !important;
  }

  #pedro-ai-app .tq-wb-v3-brand small {
    display: none !important;
  }

  #pedro-ai-app .tq-wb-v3-actions {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: 100% !important;
  }

  #pedro-ai-app .tq-wb-v3-actions .tq-wb-action-btn {
    width: 100% !important;
    padding-inline: 5px !important;
  }

  #pedro-ai-app .tq-wb-v3-actions .tq-wb-action-label {
    display: none !important;
  }

  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-workspace,
  #pedro-ai-app .tq-wb-v3-workspace {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(380px, 1fr) minmax(260px, 40vh) !important;
    overflow-y: auto !important;
  }

  #pedro-ai-app .tq-wb-v3-rail {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: 210px 150px 220px 170px !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 2px 2px 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  #pedro-ai-app .tq-wb-v3-rail-card {
    height: 100% !important;
  }

  #pedro-ai-app .tq-wb-v3-canvas-zone {
    grid-column: 1 !important;
    grid-row: 2 !important;
    min-height: 380px !important;
  }

  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-dock,
  #pedro-ai-app .tq-wb-v3-dock {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  #pedro-ai-app .tq-wb-v3-settings-card {
    grid-template-columns: minmax(0, 1fr) 96px !important;
    align-items: center !important;
    min-width: 220px !important;
  }

  #pedro-ai-app .tq-wb-v3-settings-card .tq-wb-size,
  #pedro-ai-app .tq-wb-v3-settings-card .tq-wb-bg-field {
    align-self: center !important;
  }

  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3.tq-wb-dock-hidden .tq-wb-v3-workspace,
  #pedro-ai-app .tq-wb-v3.tq-wb-dock-hidden .tq-wb-v3-workspace {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(380px, 1fr) !important;
  }
}

@media (max-width: 1180px) {
  #pedro-ai-app .tq-wb-v3-topbar,
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-topbar {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #pedro-ai-app .tq-wb-v3-actions {
    justify-content: flex-start !important;
    overflow: visible !important;
  }
}

@media (max-width: 560px) {
  #pedro-ai-app .tq-wb-v3-topbar,
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-topbar {
    padding: 8px !important;
    border-radius: 20px !important;
  }

  #pedro-ai-app .tq-wb-v3-brand .tq-wb-v3-kicker {
    padding: 3px 7px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #pedro-ai-app .tq-wb-v3 button,
  #pedro-ai-app .tq-wb-v3 .tq-wb-color {
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   v6.48.0 — Whiteboard interaction and contrast pass
   Strong hover contrast, contained colour palette and a more
   stable, readable tool rail at every app width.
   ═══════════════════════════════════════════════════════════ */
#pedro-ai-app .tq-wb-v3 {
  --tq-wb-control-ink: var(--text);
  --tq-wb-control-muted: #657188;
  --tq-wb-control-line: rgba(23, 32, 51, .12);
  --tq-wb-control-hover: #f2f6fb;
  --tq-wb-control-focus: rgba(37, 99, 235, .28);
  --tq-wb-current-color: var(--text);
}

/* Keep every interactive label tied to the button foreground colour. */
#pedro-ai-app .tq-wb-v3 button,
#pedro-ai-app .tq-wb-v3 [role="button"] {
  -webkit-tap-highlight-color: transparent;
}

#pedro-ai-app .tq-wb-v3 button > span,
#pedro-ai-app .tq-wb-v3 button > b,
#pedro-ai-app .tq-wb-v3 button > strong,
#pedro-ai-app .tq-wb-v3 button > small,
#pedro-ai-app .tq-wb-v3 button .tq-wb-action-icon,
#pedro-ai-app .tq-wb-v3 button .tq-wb-action-label,
#pedro-ai-app .tq-wb-v3 button .tq-hero-txt,
#pedro-ai-app .tq-wb-v3 button .tq-hero-txt b,
#pedro-ai-app .tq-wb-v3 button .tq-hero-txt small,
#pedro-ai-app .tq-wb-v3 button .tq-hero-go {
  color: inherit !important;
}

/* Safe default for whiteboard buttons that inherit global theme hover styles. */
#pedro-ai-app .tq-wb-v3 button.pedro-btn-secondary,
#pedro-ai-app .tq-wb-v3 button.pedro-btn {
  border-color: var(--tq-wb-control-line) !important;
  background-color: #fff !important;
  color: var(--tq-wb-control-ink) !important;
}

#pedro-ai-app .tq-wb-v3 button.pedro-btn-secondary:hover,
#pedro-ai-app .tq-wb-v3 button.pedro-btn:hover {
  border-color: rgba(37, 99, 235, .25) !important;
  background-color: var(--tq-wb-control-hover) !important;
  color: var(--text) !important;
}

#pedro-ai-app .tq-wb-v3 button.pedro-btn-secondary:active,
#pedro-ai-app .tq-wb-v3 button.pedro-btn:active {
  background-color: #e9eff7 !important;
  color: var(--text) !important;
  transform: translateY(0) !important;
}

#pedro-ai-app .tq-wb-v3 button:focus-visible,
#pedro-ai-app .tq-wb-v3 select:focus-visible,
#pedro-ai-app .tq-wb-v3 input:focus-visible,
#pedro-ai-app .tq-wb-v3 textarea:focus-visible {
  outline: 3px solid var(--tq-wb-control-focus) !important;
  outline-offset: 2px !important;
}

#pedro-ai-app .tq-wb-v3 button:disabled,
#pedro-ai-app .tq-wb-v3 button[aria-disabled="true"] {
  opacity: .46 !important;
  cursor: not-allowed !important;
  filter: saturate(.65) !important;
  transform: none !important;
}

/* Top command bar: explicit foregrounds prevent white-on-white hover states. */
#pedro-ai-app .tq-wb-v3-actions .tq-wb-action-btn {
  border: 1px solid var(--tq-wb-control-line) !important;
  background: #fff !important;
  color: var(--tq-wb-control-ink) !important;
  box-shadow: 0 4px 10px rgba(23, 32, 51, .055) !important;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease !important;
}

#pedro-ai-app .tq-wb-v3-actions .tq-wb-action-btn:hover {
  border-color: rgba(37, 99, 235, .24) !important;
  background: #f2f6fb !important;
  color: var(--text) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 18px rgba(23, 32, 51, .10) !important;
}

#pedro-ai-app .tq-wb-v3-actions .tq-wb-action-btn:active {
  background: #e8eef6 !important;
  color: var(--text) !important;
  transform: translateY(0) !important;
}

#pedro-ai-app .tq-wb-v3-actions #tq-wb-save,
#pedro-ai-app .tq-wb-v3-actions .tq-wb-primary-action {
  border-color: #c9282e !important;
  background: linear-gradient(135deg, #e53935 0%, #ef4b3f 55%, #ff7658 100%) !important;
  color: #fff !important;
  box-shadow: 0 7px 16px rgba(229, 57, 53, .22) !important;
}

#pedro-ai-app .tq-wb-v3-actions #tq-wb-save:hover,
#pedro-ai-app .tq-wb-v3-actions .tq-wb-primary-action:hover {
  border-color: #9f1f25 !important;
  background: linear-gradient(135deg, #bd242b 0%, #d93435 58%, #e85743 100%) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(190, 36, 43, .30) !important;
}

#pedro-ai-app .tq-wb-v3-actions #tq-wb-save:active,
#pedro-ai-app .tq-wb-v3-actions .tq-wb-primary-action:active {
  background: #ad2027 !important;
  color: #fff !important;
}

#pedro-ai-app .tq-wb-v3-actions .tq-wb-toggle-dock-btn.is-active,
#pedro-ai-app .tq-wb-v3-actions .tq-wb-toggle-dock-btn[aria-pressed="true"] {
  border-color: #1d4ed8 !important;
  background: linear-gradient(135deg, #2456d6, #2585de) !important;
  color: #fff !important;
}

#pedro-ai-app .tq-wb-v3-actions .tq-wb-toggle-dock-btn.is-active:hover,
#pedro-ai-app .tq-wb-v3-actions .tq-wb-toggle-dock-btn[aria-pressed="true"]:hover {
  border-color: #173da5 !important;
  background: linear-gradient(135deg, #1e46b1, #1d6cb9) !important;
  color: #fff !important;
}

#pedro-ai-app .tq-wb-v3-actions .tq-wb-danger-action {
  border-color: rgba(190, 18, 60, .16) !important;
  background: #FEF2F2 !important;
  color: #a30f3a !important;
}

#pedro-ai-app .tq-wb-v3-actions .tq-wb-danger-action:hover {
  border-color: #B91C1C !important;
  background: #DC2626 !important;
  color: #fff !important;
}

#pedro-ai-app .tq-wb-v3-actions .tq-wb-save-status {
  color: #087a55 !important;
  font-weight: 850 !important;
}

/* More stable left rail. */
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-workspace,
#pedro-ai-app .tq-wb-v3-workspace {
  grid-template-columns: 132px minmax(0, 1fr) minmax(310px, 380px) !important;
}

#pedro-ai-app .tq-wb-v3-rail {
  padding: 3px 4px 3px 3px !important;
  gap: 10px !important;
  scrollbar-gutter: stable;
}

#pedro-ai-app .tq-wb-v3-rail-card {
  padding: 11px !important;
  border: 1px solid rgba(23, 32, 51, .105) !important;
  border-radius: 19px !important;
  overflow: hidden !important;
  background-clip: padding-box !important;
  box-shadow: 0 8px 20px rgba(23, 32, 51, .065) !important;
}

#pedro-ai-app .tq-wb-v3-tool-card {
  background: linear-gradient(180deg, #ffffff 0%, #f3f7fc 100%) !important;
}

#pedro-ai-app .tq-wb-v3-color-card {
  gap: 9px !important;
  background: linear-gradient(160deg, #ffffff 0%, #fff8f1 56%, #f6f8fc 100%) !important;
}

#pedro-ai-app .tq-wb-v3-settings-card {
  background: linear-gradient(160deg, #ffffff 0%, #f0fbf7 100%) !important;
}

#pedro-ai-app .tq-wb-v3-zoom-card {
  background: linear-gradient(160deg, #ffffff 0%, #fffbea 100%) !important;
}

/* Colour selector is now a contained control rather than loose circles. */
#pedro-ai-app .tq-wb-v3-color-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
}

#pedro-ai-app .tq-wb-v3-color-name {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  min-width: 0 !important;
  max-width: 66px !important;
  padding-left: 12px !important;
  overflow: hidden !important;
  color: #59667b !important;
  font-size: 9px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#pedro-ai-app .tq-wb-v3-color-name::before {
  content: "";
  position: absolute;
  left: 0;
  width: 8px;
  height: 8px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--tq-wb-current-color) !important;
  box-shadow: 0 0 0 1px rgba(23, 32, 51, .18);
}

#pedro-ai-app .tq-wb-v3-palette-frame {
  width: 100% !important;
  min-width: 0 !important;
  padding: 9px 7px !important;
  border: 1px solid rgba(23, 32, 51, .095) !important;
  border-radius: 15px !important;
  background: rgba(255, 255, 255, .84) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .96), 0 5px 13px rgba(23, 32, 51, .05) !important;
}

#pedro-ai-app .tq-wb-v3-palette-frame .tq-wb-v3-colors {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  place-items: center !important;
  width: 100% !important;
  gap: 8px 4px !important;
  overflow: visible !important;
}

#pedro-ai-app .tq-wb-v3-colors .tq-wb-color {
  position: relative !important;
  width: 27px !important;
  height: 27px !important;
  min-width: 27px !important;
  min-height: 27px !important;
  border: 3px solid rgba(255, 255, 255, .98) !important;
  border-radius: 50% !important;
  background: var(--c) !important;
  box-shadow: 0 0 0 1px rgba(23, 32, 51, .16), 0 4px 9px rgba(23, 32, 51, .12) !important;
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease !important;
}

#pedro-ai-app .tq-wb-v3-colors .tq-wb-color::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 2px solid transparent;
  border-radius: 50%;
  pointer-events: none;
}

#pedro-ai-app .tq-wb-v3-colors .tq-wb-color:hover {
  filter: saturate(1.08) brightness(1.02) !important;
  transform: translateY(-1px) scale(1.05) !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, .18), 0 7px 14px rgba(23, 32, 51, .16) !important;
}

#pedro-ai-app .tq-wb-v3-colors .tq-wb-color.active {
  transform: none !important;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--text), 0 6px 13px rgba(23, 32, 51, .16) !important;
}

#pedro-ai-app .tq-wb-v3-colors .tq-wb-color.active::after {
  border-color: rgba(255, 255, 255, .92) !important;
}

/* Tools and zoom always retain readable foregrounds on hover. */
#pedro-ai-app .tq-wb-v3-tools .tq-wb-tool {
  border-color: rgba(23, 32, 51, .11) !important;
  background: rgba(255, 255, 255, .96) !important;
  color: #26334b !important;
}

#pedro-ai-app .tq-wb-v3-tools .tq-wb-tool:hover {
  border-color: rgba(37, 99, 235, .28) !important;
  background: #eef5ff !important;
  color: #173b85 !important;
}

#pedro-ai-app .tq-wb-v3-tools .tq-wb-tool.active,
#pedro-ai-app .tq-wb-v3-tools .tq-wb-tool.active:hover {
  border-color: var(--text) !important;
  background: var(--text) !important;
  color: #fff !important;
}

#pedro-ai-app .tq-wb-v3-zoom-card .pedro-btn-secondary {
  border-color: rgba(23, 32, 51, .11) !important;
  background: rgba(255, 255, 255, .96) !important;
  color: var(--text) !important;
}

#pedro-ai-app .tq-wb-v3-zoom-card .pedro-btn-secondary:hover {
  border-color: rgba(37, 99, 235, .26) !important;
  background: #edf4ff !important;
  color: #173b85 !important;
}

#pedro-ai-app .tq-wb-v3-settings-card .tq-wb-bg {
  border: 1px solid rgba(23, 32, 51, .12) !important;
  background-color: rgba(255, 255, 255, .96) !important;
  color: var(--text) !important;
  box-shadow: 0 4px 10px rgba(23, 32, 51, .045) !important;
}

#pedro-ai-app .tq-wb-v3-settings-card .tq-wb-bg:hover {
  border-color: rgba(37, 99, 235, .28) !important;
  background-color: #fff !important;
  color: var(--text) !important;
}

/* Teeqo, element, stamp and modal controls receive explicit hover pairs. */
#pedro-ai-app .tq-wb-v3 .tq-wb-studio-modes .tq-wb-ai-btn:not(.tq-wb-ai-convert),
#pedro-ai-app .tq-wb-v3-assets .tq-wb-elements-v6203 button {
  border-color: rgba(23, 32, 51, .105) !important;
  background: #fff !important;
  color: #1f2b40 !important;
}

#pedro-ai-app .tq-wb-v3 .tq-wb-studio-modes .tq-wb-ai-btn:not(.tq-wb-ai-convert):hover,
#pedro-ai-app .tq-wb-v3-assets .tq-wb-elements-v6203 button:hover {
  border-color: rgba(37, 99, 235, .26) !important;
  background: #eef5ff !important;
  color: #173b85 !important;
  transform: translateY(-1px) !important;
}

#pedro-ai-app .tq-wb-v3-assets .tq-wb-elements-v6203 button small {
  color: #6b778b !important;
}

#pedro-ai-app .tq-wb-v3-assets .tq-wb-elements-v6203 button:hover small {
  color: #4f6485 !important;
}

#pedro-ai-app .tq-wb-v3 .tq-wb-ai-convert {
  border-color: var(--text) !important;
  background: linear-gradient(135deg, var(--text), #4a2630) !important;
  color: #fff !important;
}

#pedro-ai-app .tq-wb-v3 .tq-wb-ai-convert:hover {
  border-color: #0d1320 !important;
  background: linear-gradient(135deg, #0f1726, #341b23) !important;
  color: #fff !important;
}

#pedro-ai-app .tq-wb-v3 .tq-wb-lesson-hero,
#pedro-ai-app .tq-wb-v3 .tq-wb-lesson-hero:hover,
#pedro-ai-app .tq-wb-v3 .tq-wb-lesson-hero:active {
  color: #fff !important;
}

#pedro-ai-app .tq-wb-v3 .tq-wb-lesson-hero:hover {
  background: linear-gradient(135deg, #c91820 0%, #981b25 58%, var(--text) 100%) !important;
  box-shadow: 0 20px 38px rgba(176, 27, 38, .31) !important;
}

#pedro-ai-app .tq-wb-v3 .tq-wb-stamp {
  border: 1px solid rgba(23, 32, 51, .105) !important;
  background: #fff !important;
  color: var(--text) !important;
}

#pedro-ai-app .tq-wb-v3 .tq-wb-stamp:hover {
  border-color: rgba(37, 99, 235, .26) !important;
  background: #eef5ff !important;
  color: var(--text) !important;
  transform: translateY(-1px) !important;
}

#pedro-ai-app .tq-wb-v3 .tq-whiteboard-library button,
#pedro-ai-app .tq-wb-v3 .tq-wb-item button {
  color: var(--text) !important;
}

#pedro-ai-app .tq-wb-v3 .tq-whiteboard-library button:hover,
#pedro-ai-app .tq-wb-v3 .tq-wb-item button:hover {
  background-color: #eef3f9 !important;
  color: var(--text) !important;
}

/* App-width responsive adjustments after the wider, cleaner rail. */
@container tq-whiteboard (max-width: 1180px) {
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-workspace,
  #pedro-ai-app .tq-wb-v3-workspace {
    grid-template-columns: 128px minmax(0, 1fr) !important;
  }

  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3.tq-wb-dock-hidden .tq-wb-v3-workspace,
  #pedro-ai-app .tq-wb-v3.tq-wb-dock-hidden .tq-wb-v3-workspace {
    grid-template-columns: 128px minmax(0, 1fr) !important;
  }
}

@container tq-whiteboard (max-width: 760px) {
  #pedro-ai-app .tq-wb-v3-rail {
    grid-template-columns: 218px 174px 224px 172px !important;
  }

  #pedro-ai-app .tq-wb-v3-color-card {
    min-width: 174px !important;
  }

  #pedro-ai-app .tq-wb-v3-palette-frame .tq-wb-v3-colors {
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 5px !important;
  }

  #pedro-ai-app .tq-wb-v3-colors .tq-wb-color {
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    min-height: 25px !important;
  }
}

/* High-specificity fixes for legacy whiteboard rules that also use !important. */
#pedro-ai-app .tq-wb-v3-actions #tq-wb-clear:hover,
#pedro-ai-app .tq-wb-v3-actions #tq-wb-clear:focus-visible {
  border-color: #B91C1C !important;
  background: #DC2626 !important;
  color: #fff !important;
}

#pedro-ai-app .tq-wb-v3 .tq-wb-studio-modes-four .tq-wb-ai-btn.tq-wb-ai-convert,
#pedro-ai-app .tq-wb-v3 .tq-wb-studio-modes-four .tq-wb-ai-btn.tq-wb-ai-convert:hover,
#pedro-ai-app .tq-wb-v3 .tq-wb-studio-modes-four .tq-wb-ai-btn.tq-wb-ai-convert:active,
#pedro-ai-app .tq-wb-v3 .tq-wb-studio-modes-four .tq-wb-ai-btn.tq-wb-ai-convert:focus-visible {
  border-color: var(--text) !important;
  background: linear-gradient(135deg, var(--text), #4a2630) !important;
  color: #fff !important;
}

#pedro-ai-app .tq-wb-v3 .tq-wb-studio-modes-four .tq-wb-ai-btn.tq-wb-ai-convert:hover {
  border-color: #0d1320 !important;
  background: linear-gradient(135deg, #0f1726, #341b23) !important;
  color: #fff !important;
}

/* =========================================================
   6.49.0 — Pizarra móvil: uso real en teléfonos
   ========================================================= */
@media (max-width: 600px) {
  html, body { overflow-x: hidden !important; }

  #pedro-ai-app.pedro-whiteboard-mode,
  #pedro-ai-app.pedro-whiteboard-mode .pedro-main,
  #pedro-ai-app.pedro-whiteboard-mode .pedro-content,
  #pedro-ai-app.pedro-whiteboard-mode .pedro-panel-stage,
  #pedro-ai-app .pedro-whiteboard-panel-wrapper {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  #pedro-ai-app .pedro-whiteboard-panel-wrapper {
    padding: 0 !important;
  }

  /* Remove the duplicated intro on phone: the compact board header already contains it. */
  #pedro-ai-app .pedro-whiteboard-panel-wrapper > .tq-whiteboard-intro {
    display: none !important;
  }

  #pedro-ai-app .tq-wb-v3-shell {
    gap: 8px !important;
    margin-top: 0 !important;
    padding: 0 6px 12px !important;
  }

  /* Compact top bar, with actions that scroll instead of crushing into tiny columns. */
  #pedro-ai-app .tq-wb-v3-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
    display: block !important;
    padding: 8px !important;
    border-radius: 0 0 18px 18px !important;
    background: rgba(255,255,255,.97) !important;
    backdrop-filter: blur(14px) !important;
    box-shadow: 0 8px 24px rgba(15,23,42,.10) !important;
  }

  #pedro-ai-app .tq-wb-v3-classroom-head {
    display: none !important;
  }

  #pedro-ai-app .tq-wb-v3-actions {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    padding: 0 1px 5px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    scroll-snap-type: x proximity !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    background: transparent !important;
    border: 0 !important;
  }

  #pedro-ai-app .tq-wb-v3-actions::-webkit-scrollbar { display: none !important; }

  #pedro-ai-app .tq-wb-v3-actions .tq-wb-action-btn {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 72px !important;
    min-height: 44px !important;
    padding: 7px 10px !important;
    border-radius: 13px !important;
    scroll-snap-align: start !important;
    font-size: 11px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  #pedro-ai-app .tq-wb-v3-actions .tq-wb-action-icon {
    font-size: 16px !important;
    line-height: 1 !important;
  }

  #pedro-ai-app .tq-wb-v3-actions .tq-wb-action-label {
    display: block !important;
    margin-top: 3px !important;
  }

  #pedro-ai-app .tq-wb-save-status {
    position: absolute !important;
    left: 10px !important;
    right: 10px !important;
    top: calc(100% + 3px) !important;
    z-index: 2 !important;
    min-height: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    pointer-events: none !important;
  }

  /* Phone order: drawing controls, then canvas, then secondary classroom tools. */
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-workspace,
  #pedro-ai-app .tq-wb-v3-workspace,
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3.tq-wb-dock-hidden .tq-wb-v3-workspace,
  #pedro-ai-app .tq-wb-v3.tq-wb-dock-hidden .tq-wb-v3-workspace {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  #pedro-ai-app .tq-wb-v3-rail { order: 1 !important; }
  #pedro-ai-app .tq-wb-v3-canvas-zone { order: 2 !important; min-width: 0 !important; width: 100% !important; }
  #pedro-ai-app .tq-wb-v3-dock { order: 3 !important; }

  /* Turn the desktop side rail into one compact, swipeable mobile strip. */
  #pedro-ai-app .tq-wb-v3-rail {
    position: sticky !important;
    top: 62px !important;
    z-index: 30 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 7px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 6px 1px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    scroll-snap-type: x proximity !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    background: rgba(247,248,244,.96) !important;
    backdrop-filter: blur(12px) !important;
  }

  #pedro-ai-app .tq-wb-v3-rail::-webkit-scrollbar { display: none !important; }

  #pedro-ai-app .tq-wb-v3-rail-card {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    height: 74px !important;
    padding: 7px !important;
    border-radius: 15px !important;
    scroll-snap-align: start !important;
    box-shadow: 0 5px 14px rgba(15,23,42,.07) !important;
  }

  #pedro-ai-app .tq-wb-v3-tool-card { width: 286px !important; }
  #pedro-ai-app .tq-wb-v3-color-card { width: 196px !important; }
  #pedro-ai-app .tq-wb-v3-settings-card { width: 218px !important; display: grid !important; grid-template-columns: 1fr 104px !important; gap: 7px !important; }
  #pedro-ai-app .tq-wb-v3-zoom-card { width: 164px !important; }

  #pedro-ai-app .tq-wb-v3-rail-label,
  #pedro-ai-app .tq-wb-v3-color-name,
  #pedro-ai-app .tq-wb-field-label,
  #pedro-ai-app .tq-wb-field-head output {
    font-size: 9px !important;
    line-height: 1 !important;
  }

  #pedro-ai-app .tq-wb-v3-tools {
    display: grid !important;
    grid-template-columns: repeat(8, 30px) !important;
    gap: 4px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  #pedro-ai-app .tq-wb-v3-tools .tq-wb-tool {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    padding: 6px !important;
    border-radius: 10px !important;
  }

  #pedro-ai-app .tq-wb-v3-tools .tq-wb-tool-icon {
    width: 17px !important;
    height: 17px !important;
  }

  #pedro-ai-app .tq-wb-v3-palette-frame {
    padding: 4px !important;
    border-radius: 12px !important;
  }

  #pedro-ai-app .tq-wb-v3-palette-frame .tq-wb-v3-colors {
    display: grid !important;
    grid-template-columns: repeat(6, 24px) !important;
    gap: 5px !important;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  #pedro-ai-app .tq-wb-v3-colors .tq-wb-color {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
  }

  #pedro-ai-app .tq-wb-v3-settings-card .tq-wb-size,
  #pedro-ai-app .tq-wb-v3-settings-card .tq-wb-bg-field {
    min-width: 0 !important;
    width: 100% !important;
  }

  #pedro-ai-app .tq-wb-v3-settings-card input[type="range"] {
    width: 100% !important;
    min-width: 0 !important;
  }

  #pedro-ai-app .tq-wb-v3-settings-card .tq-wb-bg {
    width: 100% !important;
    min-width: 0 !important;
    height: 34px !important;
    padding: 5px 24px 5px 8px !important;
    font-size: 11px !important;
  }

  #pedro-ai-app .tq-wb-v3-zoom-card {
    display: grid !important;
    grid-template-columns: 42px 66px 42px !important;
    gap: 4px !important;
    align-content: center !important;
  }

  #pedro-ai-app .tq-wb-v3-zoom-card button {
    min-width: 0 !important;
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 11px !important;
  }

  /* Canvas gets a dependable phone-sized working area. */
  #pedro-ai-app .tq-wb-v3-stage,
  #pedro-ai-app .tq-wb-workspace .tq-whiteboard-stage {
    width: 100% !important;
    min-width: 0 !important;
    height: clamp(430px, 61svh, 620px) !important;
    min-height: 430px !important;
    max-height: 620px !important;
    border-radius: 16px !important;
    border-width: 1px !important;
    touch-action: none !important;
    box-shadow: 0 12px 28px rgba(15,23,42,.12) !important;
  }

  #pedro-ai-app .tq-whiteboard-viewport,
  #pedro-ai-app .tq-whiteboard-world {
    min-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  #pedro-ai-app .tq-whiteboard-empty {
    width: calc(100% - 32px) !important;
  }

  #pedro-ai-app .tq-whiteboard-empty strong {
    font-size: clamp(25px, 8vw, 36px) !important;
  }

  #pedro-ai-app .tq-whiteboard-empty span {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  #pedro-ai-app .tq-wb-item {
    min-width: 138px !important;
    max-width: min(270px, calc(100vw - 48px)) !important;
    padding: 11px 12px !important;
    border-radius: 15px !important;
  }

  #pedro-ai-app .tq-wb-timer-card {
    right: 9px !important;
    top: 9px !important;
    min-width: 116px !important;
    padding: 10px 12px !important;
    border-radius: 15px !important;
  }

  #pedro-ai-app .tq-wb-timer-card strong { font-size: 29px !important; }

  /* Secondary tools are below the board and remain readable, never side-by-side. */
  #pedro-ai-app .tq-wb-v3-dock {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    gap: 8px !important;
  }

  #pedro-ai-app .tq-wb-v3-dock .tq-wb-dock-panel {
    width: 100% !important;
    border-radius: 16px !important;
  }

  #pedro-ai-app .tq-wb-v3-dock .tq-wb-dock-panel summary {
    min-height: 48px !important;
    padding: 11px 12px !important;
  }

  #pedro-ai-app .tq-wb-v3-dock .tq-wb-dock-panel summary span {
    font-size: 14px !important;
  }

  #pedro-ai-app .tq-wb-v3-dock .tq-wb-dock-panel summary small {
    display: none !important;
  }

  #pedro-ai-app .tq-wb-v3-dock .tq-wb-add-elements-grid,
  #pedro-ai-app .tq-wb-v3-dock .tq-wb-dock-grid {
    display: block !important;
    padding: 9px !important;
  }

  #pedro-ai-app .tq-wb-v3-element-group {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 7px !important;
    margin-bottom: 12px !important;
  }

  #pedro-ai-app .tq-wb-v3-group-label {
    grid-column: 1 / -1 !important;
  }

  #pedro-ai-app .tq-wb-v3-element-group .pedro-btn-secondary {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 58px !important;
    padding: 8px !important;
    white-space: normal !important;
  }

  #pedro-ai-app .tq-wb-v3-element-group .pedro-btn-secondary b,
  #pedro-ai-app .tq-wb-v3-element-group .pedro-btn-secondary small {
    overflow-wrap: anywhere !important;
  }

  #pedro-ai-app .tq-wb-studio-modes-four {
    grid-template-columns: 1fr 1fr !important;
  }

  #pedro-ai-app .tq-wb-ai-convert {
    grid-column: 1 / -1 !important;
  }

  #pedro-ai-app .tq-whiteboard-library {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    top: max(72px, env(safe-area-inset-top)) !important;
    bottom: 8px !important;
    width: auto !important;
    max-height: none !important;
    border-radius: 18px !important;
    z-index: 1000 !important;
  }

  /* Keep focus and touch states legible; phones should not inherit white-on-white hover rules. */
  #pedro-ai-app .tq-wb-v3 button:hover,
  #pedro-ai-app .tq-wb-v3 button:focus-visible {
    color: inherit;
  }

  #pedro-ai-app .tq-wb-v3-actions #tq-wb-save,
  #pedro-ai-app .tq-wb-v3-actions #tq-wb-save:hover,
  #pedro-ai-app .tq-wb-v3-actions #tq-wb-save:focus-visible {
    background: #DC2626 !important;
    border-color: #B91C1C !important;
    color: #fff !important;
  }
}

@media (max-width: 380px) {
  #pedro-ai-app .tq-wb-v3-shell { padding-inline: 4px !important; }
  #pedro-ai-app .tq-wb-v3-actions .tq-wb-action-btn { min-width: 68px !important; padding-inline: 8px !important; }
  #pedro-ai-app .tq-wb-v3-tool-card { width: 278px !important; }
  #pedro-ai-app .tq-wb-v3-color-card { width: 188px !important; }
  #pedro-ai-app .tq-wb-v3-stage,
  #pedro-ai-app .tq-wb-workspace .tq-whiteboard-stage { min-height: 410px !important; height: 58svh !important; }
}

/* =========================================================
   6.50.0 — Pizarra móvil reconstruida
   Sin carruseles cortados, sin solapamientos y con controles
   compactos que caben realmente en el ancho del teléfono.
   ========================================================= */
@media (max-width: 700px) {
  html,
  body,
  #pedro-ai-app,
  #pedro-ai-app .pedro-main,
  #pedro-ai-app .pedro-content,
  #pedro-ai-app .pedro-main-content,
  #pedro-ai-app .pedro-panel-stage,
  #pedro-ai-app .pedro-whiteboard-panel-wrapper,
  #pedro-ai-app .tq-wb-v3,
  #pedro-ai-app .tq-wb-v3-shell,
  #pedro-ai-app .tq-wb-v3-workspace {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html,
  body {
    overflow-x: hidden !important;
  }

  #pedro-ai-app .pedro-whiteboard-panel-wrapper {
    width: 100% !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #pedro-ai-app .pedro-whiteboard-panel-wrapper > .tq-whiteboard-intro {
    display: none !important;
  }

  #pedro-ai-app .tq-wb-v3-shell,
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-shell {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 6px !important;
    margin: 0 !important;
    overflow: visible !important;
    background:
      radial-gradient(circle at 8% 0%, rgba(229,57,53,.055), transparent 25%),
      radial-gradient(circle at 96% 4%, rgba(37,99,235,.055), transparent 26%),
      #f5f7fa !important;
  }

  /* Una sola fila real de acciones. No scroll horizontal ni dos filas gigantes. */
  #pedro-ai-app .tq-wb-v3-topbar,
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-topbar {
    position: relative !important;
    top: auto !important;
    z-index: 20 !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 7px !important;
    padding: 5px !important;
    border: 1px solid rgba(23,32,51,.10) !important;
    border-radius: 16px !important;
    overflow: visible !important;
    background: rgba(255,255,255,.96) !important;
    box-shadow: 0 8px 22px rgba(23,32,51,.08) !important;
    backdrop-filter: blur(14px) !important;
  }

  #pedro-ai-app .tq-wb-v3-classroom-head {
    display: none !important;
  }

  #pedro-ai-app .tq-wb-v3-actions {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: 4px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
  }

  #pedro-ai-app .tq-wb-v3-actions .tq-wb-action-btn {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 11px !important;
    scroll-snap-align: unset !important;
    white-space: nowrap !important;
    box-shadow: 0 3px 9px rgba(23,32,51,.055) !important;
    transform: none !important;
  }

  #pedro-ai-app .tq-wb-v3-actions .tq-wb-action-icon {
    display: block !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  #pedro-ai-app .tq-wb-v3-actions #tq-wb-print .tq-wb-action-icon {
    font-size: 10px !important;
    letter-spacing: -.03em !important;
  }

  #pedro-ai-app .tq-wb-v3-actions .tq-wb-action-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  #pedro-ai-app .tq-wb-v3-actions #tq-wb-save,
  #pedro-ai-app .tq-wb-v3-actions #tq-wb-save:hover,
  #pedro-ai-app .tq-wb-v3-actions #tq-wb-save:active,
  #pedro-ai-app .tq-wb-v3-actions #tq-wb-save:focus-visible {
    border-color: #B91C1C !important;
    background: linear-gradient(145deg, #DC2626, #B91C1C) !important;
    color: #fff !important;
  }

  #pedro-ai-app .tq-wb-v3-actions #tq-wb-clear,
  #pedro-ai-app .tq-wb-v3-actions #tq-wb-clear:hover,
  #pedro-ai-app .tq-wb-v3-actions #tq-wb-clear:active,
  #pedro-ai-app .tq-wb-v3-actions #tq-wb-clear:focus-visible {
    border-color: rgba(200,24,30,.22) !important;
    background: #FEF2F2 !important;
    /* #DC2626 sobre #FEF2F2 se queda en 4.41:1 y el texto es de 10.5px:
       con #C8181E sube a 5.0:1 y sigue leyéndose como rojo de aviso. */
    color: #C8181E !important;
  }

  #pedro-ai-app .tq-wb-v3-actions #tq-wb-toggle-dock,
  #pedro-ai-app .tq-wb-v3-actions #tq-wb-toggle-dock:hover,
  #pedro-ai-app .tq-wb-v3-actions #tq-wb-toggle-dock:active,
  #pedro-ai-app .tq-wb-v3-actions #tq-wb-toggle-dock:focus-visible,
  #pedro-ai-app .tq-wb-v3-actions #tq-wb-toggle-dock[aria-pressed="true"] {
    border-color: #1d4ed8 !important;
    background: #2563eb !important;
    color: #fff !important;
  }

  #pedro-ai-app .tq-wb-save-status {
    grid-column: 1 / -1 !important;
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }

  #pedro-ai-app .tq-wb-save-status:empty {
    display: none !important;
  }

  /* El workspace deja de tener una altura rígida: era la causa del solapamiento. */
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-workspace,
  #pedro-ai-app .tq-wb-v3-workspace,
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3.tq-wb-dock-hidden .tq-wb-v3-workspace,
  #pedro-ai-app .tq-wb-v3.tq-wb-dock-hidden .tq-wb-v3-workspace {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    gap: 7px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #pedro-ai-app .tq-wb-v3-rail {
    order: 1 !important;
    position: static !important;
    top: auto !important;
    z-index: 10 !important;
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 126px !important;
    grid-auto-rows: auto !important;
    align-items: stretch !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    backdrop-filter: none !important;
  }

  #pedro-ai-app .tq-wb-v3-rail-card {
    position: relative !important;
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    scroll-snap-align: unset !important;
    box-shadow: 0 5px 14px rgba(23,32,51,.055) !important;
  }

  /* Herramientas: ocho iconos completos y sin recorte. */
  #pedro-ai-app .tq-wb-v3-tool-card {
    grid-column: 1 / -1 !important;
    display: block !important;
    padding: 6px !important;
    background: rgba(255,255,255,.97) !important;
  }

  #pedro-ai-app .tq-wb-v3-tool-card > .tq-wb-v3-rail-label {
    display: none !important;
  }

  #pedro-ai-app .tq-wb-v3-tools {
    display: grid !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #pedro-ai-app .tq-wb-v3-tools .tq-wb-tool {
    width: 100% !important;
    min-width: 0 !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 8px !important;
    border-radius: 10px !important;
  }

  #pedro-ai-app .tq-wb-v3-tools .tq-wb-tool-icon {
    width: 19px !important;
    height: 19px !important;
  }

  /* Color y zoom comparten una fila; ninguno se sale del contenedor. */
  #pedro-ai-app .tq-wb-v3-color-card {
    grid-column: 1 !important;
    display: block !important;
    padding: 6px !important;
    background: rgba(255,255,255,.97) !important;
  }

  #pedro-ai-app .tq-wb-v3-color-head {
    display: none !important;
  }

  #pedro-ai-app .tq-wb-v3-palette-frame {
    width: 100% !important;
    min-width: 0 !important;
    padding: 3px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #pedro-ai-app .tq-wb-v3-palette-frame .tq-wb-v3-colors {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    place-items: center !important;
    gap: 3px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #pedro-ai-app .tq-wb-v3-colors .tq-wb-color {
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
    border-width: 3px !important;
  }

  #pedro-ai-app .tq-wb-v3-zoom-card {
    grid-column: 2 !important;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) 34px !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 6px !important;
    background: rgba(255,255,255,.97) !important;
  }

  #pedro-ai-app .tq-wb-v3-zoom-card button {
    width: 100% !important;
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border-radius: 10px !important;
  }

  #pedro-ai-app .tq-wb-v3-zoom-card .tq-wb-zoom-reset {
    font-size: 10px !important;
  }

  /* Grosor y fondo en una única fila limpia. */
  #pedro-ai-app .tq-wb-v3-settings-card {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 132px !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 8px !important;
    background: rgba(255,255,255,.97) !important;
  }

  #pedro-ai-app .tq-wb-v3-settings-card .tq-wb-size,
  #pedro-ai-app .tq-wb-v3-settings-card .tq-wb-bg-field {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 4px !important;
    margin: 0 !important;
  }

  #pedro-ai-app .tq-wb-v3-settings-card .tq-wb-field-head,
  #pedro-ai-app .tq-wb-v3-settings-card .tq-wb-field-label {
    min-width: 0 !important;
    font-size: 8.5px !important;
  }

  #pedro-ai-app .tq-wb-v3-settings-card #tq-wb-size {
    width: 100% !important;
    min-width: 0 !important;
    height: 17px !important;
  }

  #pedro-ai-app .tq-wb-v3-settings-card .tq-wb-bg {
    width: 100% !important;
    min-width: 0 !important;
    height: 34px !important;
    padding: 4px 24px 4px 8px !important;
    border-radius: 9px !important;
    font-size: 10px !important;
  }

  /* El lienzo ya no se encoge debajo de la toolbar. */
  #pedro-ai-app .tq-wb-v3-canvas-zone {
    order: 2 !important;
    flex: 0 0 auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  #pedro-ai-app .tq-wb-v3-stage,
  #pedro-ai-app .tq-wb-workspace .tq-whiteboard-stage {
    display: block !important;
    width: 100% !important;
    height: clamp(460px, 62svh, 620px) !important;
    min-width: 0 !important;
    min-height: 460px !important;
    max-height: 620px !important;
    margin: 0 !important;
    border: 1px solid rgba(23,32,51,.13) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    touch-action: none !important;
    box-shadow: 0 10px 25px rgba(23,32,51,.11) !important;
  }

  #pedro-ai-app .tq-whiteboard-viewport,
  #pedro-ai-app .tq-whiteboard-world {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
  }

  #pedro-ai-app .tq-whiteboard-empty {
    width: calc(100% - 28px) !important;
    min-width: 0 !important;
    max-width: 440px !important;
    padding: 20px 16px !important;
    border-radius: 22px !important;
  }

  #pedro-ai-app .tq-whiteboard-empty strong {
    font-size: clamp(23px, 7vw, 31px) !important;
    line-height: 1.05 !important;
  }

  #pedro-ai-app .tq-whiteboard-empty span {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  /* Paneles secundarios debajo, cerrados por defecto desde JS en móvil. */
  #pedro-ai-app .tq-wb-v3-dock {
    order: 3 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    gap: 7px !important;
    padding: 0 0 8px !important;
    overflow: visible !important;
  }

  #pedro-ai-app .tq-wb-v3.tq-wb-dock-hidden .tq-wb-v3-dock {
    display: none !important;
  }

  #pedro-ai-app .tq-wb-v3-dock .tq-wb-dock-panel {
    width: 100% !important;
    min-width: 0 !important;
    border-radius: 15px !important;
  }

  #pedro-ai-app .tq-wb-v3-dock .tq-wb-dock-panel > summary {
    min-height: 46px !important;
    padding: 10px 12px !important;
  }

  #pedro-ai-app .tq-wb-v3-dock .tq-wb-dock-panel > summary span {
    font-size: 13px !important;
  }

  #pedro-ai-app .tq-wb-v3-dock .tq-wb-dock-panel > summary small {
    display: none !important;
  }

  #pedro-ai-app .tq-whiteboard-library {
    position: fixed !important;
    inset: max(70px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-height: none !important;
    border-radius: 18px !important;
    z-index: 1000 !important;
  }
}

@media (max-width: 360px) {
  #pedro-ai-app .tq-wb-v3-shell,
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-shell {
    padding: 4px !important;
  }

  #pedro-ai-app .tq-wb-v3-actions {
    gap: 3px !important;
  }

  #pedro-ai-app .tq-wb-v3-actions .tq-wb-action-btn {
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 9px !important;
  }

  #pedro-ai-app .tq-wb-v3-tools {
    gap: 3px !important;
  }

  #pedro-ai-app .tq-wb-v3-tools .tq-wb-tool {
    height: 35px !important;
    min-height: 35px !important;
    padding: 7px !important;
  }

  #pedro-ai-app .tq-wb-v3-rail {
    grid-template-columns: minmax(0, 1fr) 116px !important;
  }

  #pedro-ai-app .tq-wb-v3-colors .tq-wb-color {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
  }

  #pedro-ai-app .tq-wb-v3-settings-card {
    grid-template-columns: minmax(0, 1fr) 118px !important;
  }

  #pedro-ai-app .tq-wb-v3-stage,
  #pedro-ai-app .tq-wb-workspace .tq-whiteboard-stage {
    height: 450px !important;
    min-height: 450px !important;
  }
}

/* 6.50.0 — specificity shield against legacy v2/mobile rules */
@media (max-width: 700px) {
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-topbar .tq-wb-v3-actions,
  #pedro-ai-app .tq-wb-v3-topbar.tq-wb-v2-topbar .tq-wb-v3-actions.tq-wb-v2-actions {
    display: grid !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    grid-template-rows: 42px !important;
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    gap: 4px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-topbar .tq-wb-v3-actions .tq-wb-action-btn,
  #pedro-ai-app .tq-wb-v3-topbar.tq-wb-v2-topbar .tq-wb-v3-actions.tq-wb-v2-actions .tq-wb-action-btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
  }

  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-workspace .tq-wb-v3-rail {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #pedro-ai-app .tq-wb-v3-tool-card {
    grid-row: 1 !important;
  }

  #pedro-ai-app .tq-wb-v3-color-card {
    grid-row: 2 !important;
  }

  #pedro-ai-app .tq-wb-v3-zoom-card {
    grid-row: 2 !important;
  }

  #pedro-ai-app .tq-wb-v3-settings-card {
    grid-row: 3 !important;
  }

  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-workspace .tq-wb-v3-canvas-zone {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: 460px !important;
    min-height: 460px !important;
    max-height: 620px !important;
  }

  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-workspace .tq-whiteboard-stage,
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-workspace .tq-wb-v3-stage {
    flex: none !important;
    width: 100% !important;
    height: clamp(460px, 62svh, 620px) !important;
    min-height: 460px !important;
    max-height: 620px !important;
  }

  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-workspace .tq-wb-v3-dock {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

@media (max-width: 360px) {
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-topbar .tq-wb-v3-actions,
  #pedro-ai-app .tq-wb-v3-topbar.tq-wb-v2-topbar .tq-wb-v3-actions.tq-wb-v2-actions {
    grid-template-rows: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    gap: 3px !important;
  }

  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-topbar .tq-wb-v3-actions .tq-wb-action-btn,
  #pedro-ai-app .tq-wb-v3-topbar.tq-wb-v2-topbar .tq-wb-v3-actions.tq-wb-v2-actions .tq-wb-action-btn {
    height: 38px !important;
    min-height: 38px !important;
  }

  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-workspace .tq-wb-v3-canvas-zone,
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-workspace .tq-whiteboard-stage,
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-workspace .tq-wb-v3-stage {
    height: 450px !important;
    min-height: 450px !important;
    max-height: 450px !important;
  }
}

/* 6.50.0 — mobile scroll chain repair inside the fullscreen teacher studio */
@media (max-width: 700px) {
  #pedro-ai-app.pedro-whiteboard-mode #pedro-whiteboard-panel.active {
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  #pedro-ai-app.pedro-whiteboard-mode #pedro-whiteboard-panel .pedro-wow-panel-stage {
    display: block !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #pedro-ai-app.pedro-whiteboard-mode .pedro-whiteboard-panel-wrapper {
    display: block !important;
    width: 100% !important;
    min-height: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }

  #pedro-ai-app.pedro-whiteboard-mode .pedro-whiteboard-panel-wrapper .tq-whiteboard-shell,
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-shell {
    display: block !important;
    width: 100% !important;
    min-height: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }

  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-workspace .tq-wb-v3-canvas-zone,
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-workspace .tq-whiteboard-stage,
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-workspace .tq-wb-v3-stage {
    height: clamp(460px, 62svh, 620px) !important;
    min-height: 460px !important;
    max-height: 620px !important;
  }
}

@media (max-width: 360px) {
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-workspace .tq-wb-v3-canvas-zone,
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-workspace .tq-whiteboard-stage,
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-workspace .tq-wb-v3-stage {
    height: 450px !important;
    min-height: 450px !important;
    max-height: 450px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   v6.50.0 — PIZARRA IMPECABLE: resize fluido, sin botones S/M/L/XL,
   barra superior reorganizada, visual limpio y profesional.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. ELIMINAR BOTONES S/M/L/XL DE LAS TARJETAS ── */
/* Los botones de tamaño se reemplazam por resize libre con el asa */
#pedro-ai-app .tq-wb-item-tools,
#pedro-ai-app .tq-wb-v2 .tq-wb-item-tools {
  display: none !important;
}

/* También los S/M/L/XL de la barra de texto enriquecido */
#pedro-ai-app .tq-rich-size {
  display: none !important;
}
/* Mantener el separador limpio cuando desaparecen los tamaños */
#pedro-ai-app .tq-rich-toolbar .tq-rich-sep {
  display: none !important;
}

/* ── 2. RESIZE FLUIDO: CONTENIDO INTERNO CRECE CON EL ELEMENTO ── */
/* container-type en el item para que los hijos usen cqi */
#pedro-ai-app .tq-wb-v2 .tq-wb-item {
  container-type: inline-size !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

/* El body ocupa todo el espacio vertical disponible y hace scroll si hace falta */
#pedro-ai-app .tq-wb-v2 .tq-wb-item-body {
  flex: 1 1 auto !important;
  min-height: 36px !important;
  overflow: auto !important;
  /* Texto escala con el ancho del contenedor */
  font-size: clamp(12px, 4.2cqi, 28px) !important;
  line-height: 1.42 !important;
}

/* Título también escala */
#pedro-ai-app .tq-wb-v2 .tq-wb-item-title {
  font-size: clamp(13px, 4.8cqi, 24px) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  flex: 1 1 60px !important;
  min-width: 60px !important;
}

/* Vocabulary grid: se refluye según ancho real */
#pedro-ai-app .tq-wb-v2 .tq-vocab-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)) !important;
}

/* Verb grid */
#pedro-ai-app .tq-wb-v2 .tq-verb-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(110px, 100%), 1fr)) !important;
}

/* Texto largo */
#pedro-ai-app .tq-wb-v2 .tq-text-body,
#pedro-ai-app .tq-wb-v2 .tq-rich-text-editor {
  font-size: clamp(12px, 3.8cqi, 22px) !important;
  line-height: 1.5 !important;
}

/* Tarjeta de título */
#pedro-ai-app .tq-wb-v2 .tq-card-title .tq-rich-text-editor,
#pedro-ai-app .tq-wb-v2 .tq-card-title .tq-title-rich-editor {
  font-size: clamp(22px, 10cqi, 72px) !important;
  line-height: 1.1 !important;
}

/* Cabecera: cuando la tarjeta es muy estrecha, los botones hacen wrap */
#pedro-ai-app .tq-wb-v2 .tq-wb-item-head {
  flex-wrap: wrap !important;
  row-gap: 3px !important;
}

/* Botones de acción (varita, paleta, candado, ⧉, ×) nunca se comprimen */
#pedro-ai-app .tq-wb-v2 .tq-wb-item-wand,
#pedro-ai-app .tq-wb-v2 .tq-wb-item-paint,
#pedro-ai-app .tq-wb-v2 .tq-wb-item-lock,
#pedro-ai-app .tq-wb-v2 .tq-wb-item-duplicate,
#pedro-ai-app .tq-wb-v2 .tq-wb-item-speak,
#pedro-ai-app .tq-wb-v2 .tq-wb-item-close {
  flex: 0 0 auto !important;
}

/* ── 3. ASA DE RESIZE MEJORADA: más grande, más elegante ── */
#pedro-ai-app .tq-wb-item-resizer {
  position: absolute !important;
  right: -1px !important; bottom: -1px !important;
  width: 28px !important; height: 28px !important;
  cursor: nwse-resize !important;
  z-index: 9 !important;
  border-radius: 0 0 18px 0 !important;
  opacity: 0 !important;
  transition: opacity .18s ease, background .18s ease !important;
  background:
    linear-gradient(135deg,
      transparent 0 44%,
      rgba(0,0,0,.22) 44% 52%,
      transparent 52% 62%,
      rgba(0,0,0,.22) 62% 70%,
      transparent 70% 80%,
      rgba(0,0,0,.22) 80% 88%,
      transparent 88%
    ) !important;
  touch-action: none !important;
  pointer-events: none !important;
}

/* Mostrar asa al pasar el ratón o al redimensionar */
#pedro-ai-app .tq-wb-item:hover .tq-wb-item-resizer,
#pedro-ai-app .tq-wb-item.is-selected .tq-wb-item-resizer {
  opacity: .7 !important;
  pointer-events: auto !important;
}

#pedro-ai-app .tq-wb-item.is-resizing .tq-wb-item-resizer {
  opacity: 1 !important;
  pointer-events: auto !important;
  background:
    linear-gradient(135deg,
      transparent 0 44%,
      rgba(108,92,231,.70) 44% 52%,
      transparent 52% 62%,
      rgba(108,92,231,.70) 62% 70%,
      transparent 70% 80%,
      rgba(108,92,231,.70) 80% 88%,
      transparent 88%
    ) !important;
}

/* Anillo de resize activo */
#pedro-ai-app .tq-wb-item.is-resizing {
  box-shadow: 0 0 0 2px rgba(108,92,231,.50), 0 20px 50px rgba(0,0,0,.18) !important;
  user-select: none !important;
}
#pedro-ai-app .tq-wb-item.is-resizing * {
  pointer-events: none !important;
}
#pedro-ai-app .tq-wb-item.is-resizing .tq-wb-item-resizer {
  pointer-events: auto !important;
}

/* En pantalla táctil el asa es más grande */
@media (pointer: coarse) {
  #pedro-ai-app .tq-wb-item-resizer {
    width: 36px !important; height: 36px !important;
    opacity: .45 !important;
    pointer-events: auto !important;
  }
}

/* ── 4. BARRA SUPERIOR v3: REORGANIZACIÓN VISUAL ── */
/* Los botones de acción se reorganizan en grupos semánticos con divisores */
#pedro-ai-app .tq-wb-v3-actions {
  gap: 5px !important;
  padding: 7px 8px !important;
  border: 1px solid rgba(23,32,51,.09) !important;
  border-radius: 20px !important;
  background: rgba(248,250,252,.92) !important;
  backdrop-filter: blur(6px) !important;
}

/* Todos los action-btn: iconos + labels, compactos */
#pedro-ai-app .tq-wb-v3-actions .tq-wb-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 9px !important;
  border-radius: 11px !important;
  border: 1px solid rgba(23,32,51,.10) !important;
  background: #fff !important;
  color: var(--text) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  box-shadow: 0 5px 12px rgba(23,32,51,.055) !important;
  white-space: nowrap !important;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease !important;
}

#pedro-ai-app .tq-wb-v3-actions .tq-wb-action-btn:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(37,99,235,.26) !important;
  box-shadow: 0 10px 22px rgba(37,99,235,.10) !important;
}

/* Iconos de acción */
#pedro-ai-app .tq-wb-v3-actions .tq-wb-action-icon {
  display: inline-grid !important;
  place-items: center !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  min-width: 14px !important;
}

/* Labels de acción */
#pedro-ai-app .tq-wb-v3-actions .tq-wb-action-label {
  display: inline-block !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

/* Guardar: acento rojo */
#pedro-ai-app .tq-wb-v3-actions .tq-wb-primary-action {
  background: #6C5CE7 !important;
  border-color: #6C5CE7 !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(108,92,231,.22) !important;
}
#pedro-ai-app .tq-wb-v3-actions .tq-wb-primary-action:hover {
  background: #c8181e !important;
  border-color: #c8181e !important;
  box-shadow: 0 12px 24px rgba(108,92,231,.32) !important;
}

/* Herramientas activo: azul */
#pedro-ai-app .tq-wb-v3-actions .tq-wb-toggle-dock-btn.is-active,
#pedro-ai-app .tq-wb-v3-actions .tq-wb-toggle-dock-btn[aria-pressed="true"] {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(37,99,235,.22) !important;
}
#pedro-ai-app .tq-wb-v3-actions .tq-wb-toggle-dock-btn.is-active:hover,
#pedro-ai-app .tq-wb-v3-actions .tq-wb-toggle-dock-btn[aria-pressed="true"]:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 24px rgba(37,99,235,.30) !important;
  border-color: #1d4ed8 !important;
}

/* Limpiar: tono rojo suave, no grita */
#pedro-ai-app .tq-wb-v3-actions .tq-wb-danger-action {
  background: #f4f2ff !important;
  border-color: rgba(108,92,231,.18) !important;
  color: #c8181e !important;
}
#pedro-ai-app .tq-wb-v3-actions .tq-wb-danger-action:hover {
  background: #fee2e2 !important;
  border-color: rgba(108,92,231,.40) !important;
  box-shadow: 0 10px 22px rgba(108,92,231,.12) !important;
}

/* Divisores semánticos entre grupos de botones */
#pedro-ai-app .tq-wb-v3-actions .tq-wb-action-divider {
  width: 1px !important;
  height: 22px !important;
  background: rgba(23,32,51,.10) !important;
  flex-shrink: 0 !important;
  border: 0 !important;
  padding: 0 !important;
  cursor: default !important;
  pointer-events: none !important;
}

/* Status de guardado */
#pedro-ai-app .tq-wb-v3-actions .tq-wb-save-status {
  min-width: 0 !important;
  max-width: 90px !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  color: #059669 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Botones compactos (undo/redo): solo icono, cuadrados */
#pedro-ai-app .tq-wb-v3-actions .tq-wb-compact-action {
  min-width: 34px !important;
  width: 34px !important;
  padding: 0 !important;
}
#pedro-ai-app .tq-wb-v3-actions .tq-wb-compact-action .tq-wb-action-label {
  display: none !important;
}

/* ── 5. RESPONSIVE: Pantallas medianas ── */
@media (max-width: 1180px) {
  #pedro-ai-app .tq-wb-v3-actions .tq-wb-action-btn {
    padding: 0 7px !important;
  }
  #pedro-ai-app .tq-wb-v3-actions .tq-wb-action-label {
    display: none !important;
  }
  #pedro-ai-app .tq-wb-v3-actions .tq-wb-compact-action {
    width: 34px !important;
  }
  #pedro-ai-app .tq-wb-v3-actions .tq-wb-action-divider {
    height: 18px !important;
  }
}

@media (max-width: 560px) {
  #pedro-ai-app .tq-wb-v3-actions .tq-wb-action-divider {
    display: none !important;
  }
  #pedro-ai-app .tq-wb-v3-actions .tq-wb-action-btn {
    min-width: 0 !important;
    width: 34px !important;
    padding: 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   v6.43.0 — RESIZE FLUIDO EN AMBOS EJES, UNIFORME PARA TODOS LOS ELEMENTOS
   El contenido interno escala con --tq-scale (lo fija el JS combinando el
   ratio de ancho Y de alto), así crece tanto al estirar en horizontal como
   en vertical. Sustituye al escalado cqi (solo ancho) de v6.38.4/v6.42.0.
   Cada tamaño = clamp(min, calc(base * var(--tq-scale,1)), max): si el JS no
   ha corrido todavía, var(--tq-scale,1)=1 y se ve en su tamaño por defecto.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Texto editable general (notas, cajas, body) ── */
#pedro-ai-app .tq-wb-v2 .tq-wb-item-body{
  font-size:clamp(12px,calc(14px * var(--tq-scale,1)),34px)!important;
  line-height:1.4!important;
}
/* Las notas conservan su tipografía algo mayor */
#pedro-ai-app .tq-wb-v2 .tq-card-note .tq-wb-item-body{
  font-size:clamp(13px,calc(16px * var(--tq-scale,1)),40px)!important;
}
/* Texto largo / lectura y editor enriquecido */
#pedro-ai-app .tq-wb-v2 .tq-text-body,
#pedro-ai-app .tq-wb-v2 .tq-rich-text-editor{
  font-size:clamp(12px,calc(16px * var(--tq-scale,1)),34px)!important;
  line-height:1.5!important;
}
#pedro-ai-app .tq-wb-v2 .tq-card-rich-text .tq-rich-text-editor{
  font-size:clamp(14px,calc(20px * var(--tq-scale,1)),46px)!important;
}
/* Caja de escritura del alumno */
#pedro-ai-app .tq-wb-v2 .tq-write-box-input{
  font-size:clamp(13px,calc(16px * var(--tq-scale,1)),36px)!important;
}

/* ── Tarjeta TÍTULO: titular grande que crece de verdad ── */
#pedro-ai-app .tq-wb-v2 .tq-card-title .tq-wb-item-body,
#pedro-ai-app .tq-wb-v2 .tq-card-title .tq-rich-text-editor,
#pedro-ai-app .tq-wb-v2 .tq-card-title .tq-title-rich-editor{
  font-size:clamp(22px,calc(40px * var(--tq-scale,1)),140px)!important;
  line-height:1.08!important;
}

/* ── VOCABULARIO: emoji, palabra y traducción a la vez ── */
#pedro-ai-app .tq-wb-v2 .tq-vocab-card .tq-vocab-emoji{ font-size:clamp(22px,calc(40px * var(--tq-scale,1)),96px)!important; }
#pedro-ai-app .tq-wb-v2 .tq-vocab-card strong{ font-size:clamp(13px,calc(18px * var(--tq-scale,1)),42px)!important; }
#pedro-ai-app .tq-wb-v2 .tq-vocab-card span{ font-size:clamp(11px,calc(14px * var(--tq-scale,1)),30px)!important; }

/* ── VERBOS ── */
#pedro-ai-app .tq-wb-v2 .tq-verb-card b{ font-size:clamp(13px,calc(18px * var(--tq-scale,1)),42px)!important; }
#pedro-ai-app .tq-wb-v2 .tq-verb-card span{ font-size:clamp(10px,calc(13px * var(--tq-scale,1)),28px)!important; }

/* ── Base de cualquier native-card ── */
#pedro-ai-app .tq-wb-v2 .tq-native-card{
  font-size:clamp(12px,calc(14px * var(--tq-scale,1)),30px)!important;
  gap:clamp(7px,calc(10px * var(--tq-scale,1)),24px)!important;
}
/* NOTA: no escalamos genéricamente los botones de native-card porque rompía
   los controles de las barras (negrita/tamaño/colores/Limpiar de la caja de
   escritura). Los botones que deben crecer (timer, flip, match…) tienen su
   propia regla específica más abajo. */

/* ── TIMER: reloj, barra y botones ── */
#pedro-ai-app .tq-wb-v2 .tq-timer-clock,
#pedro-ai-app .tq-wb-v2 .tq-native-timer .tq-timer-clock{
  font-size:clamp(30px,calc(54px * var(--tq-scale,1)),160px)!important;
  line-height:1!important;
}
#pedro-ai-app .tq-wb-v2 .tq-timer-bar{ height:clamp(8px,calc(12px * var(--tq-scale,1)),30px)!important; }
#pedro-ai-app .tq-wb-v2 .tq-timer-actions{ gap:clamp(6px,calc(8px * var(--tq-scale,1)),18px)!important; }
#pedro-ai-app .tq-wb-v2 .tq-timer-actions button{
  font-size:clamp(10px,calc(12px * var(--tq-scale,1)),24px)!important;
  padding:clamp(7px,calc(9px * var(--tq-scale,1)),20px)!important;
}

/* ── FLIP Q/A ── */
#pedro-ai-app .tq-wb-v2 .tq-flip-face{
  font-size:clamp(15px,calc(17px * var(--tq-scale,1)),56px)!important;
  min-height:clamp(64px,calc(78px * var(--tq-scale,1)),260px)!important;
  padding:clamp(10px,calc(12px * var(--tq-scale,1)),28px)!important;
}
#pedro-ai-app .tq-wb-v2 .tq-flip-btn{
  font-size:clamp(11px,calc(12px * var(--tq-scale,1)),24px)!important;
  padding:clamp(7px,calc(8px * var(--tq-scale,1)),16px) clamp(10px,calc(12px * var(--tq-scale,1)),24px)!important;
}

/* ── OBJETIVO / SORT ── */
#pedro-ai-app .tq-wb-v2 .tq-special-objective b{ font-size:clamp(12px,calc(13px * var(--tq-scale,1)),30px)!important; }
#pedro-ai-app .tq-wb-v2 .tq-special-sort b{ font-size:clamp(11px,calc(12px * var(--tq-scale,1)),28px)!important; }

/* ── MATCH (emparejar) ── */
#pedro-ai-app .tq-wb-v2 .tq-match-token{
  font-size:clamp(11px,calc(12px * var(--tq-scale,1)),28px)!important;
  padding:clamp(7px,calc(8px * var(--tq-scale,1)),18px)!important;
}
#pedro-ai-app .tq-wb-v2 .tq-match-score,
#pedro-ai-app .tq-wb-v2 .tq-match-help,
#pedro-ai-app .tq-wb-v2 .tq-match-hint,
#pedro-ai-app .tq-wb-v2 .tq-match-reset{ font-size:clamp(10px,calc(11px * var(--tq-scale,1)),24px)!important; }

/* ── SPINNER / reto oral ── */
#pedro-ai-app .tq-wb-v2 .tq-native-spinner-wheel .tq-native-spinner-result{
  font-size:clamp(16px,calc(22px * var(--tq-scale,1)),52px)!important;
}

/* ── SEMÁFORO: las luces crecen con el elemento ── */
#pedro-ai-app .tq-wb-v2 .tq-native-traffic button{
  width:clamp(46px,calc(58px * var(--tq-scale,1)),170px)!important;
  height:clamp(46px,calc(58px * var(--tq-scale,1)),170px)!important;
}

/* El body llena la ventana redimensionada (la caja, flex-column, limita la
   altura); sin tope de 360px en tamaño S para que el contenido grande se vea
   entero al agrandar en cualquier dirección. */
#pedro-ai-app .tq-wb-v2 .tq-wb-size-s .tq-wb-item-body{ max-height:none!important; }

/* ═══════════════════════════════════════════════════════════════════════
   v6.43.1 — Logo Teeqo Intelligence en opciones de IA + semáforo sin fondo
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Logo de Teeqo Intelligence en el botón de IA del elemento ── */
#pedro-ai-app .tq-wb-item-wand.tq-wb-item-wand-logo{ opacity:1!important; }
#pedro-ai-app .tq-wb-item-wand.tq-wb-item-wand-logo .tq-ti-mark{
  width:18px!important;height:18px!important;display:block;object-fit:contain;border-radius:5px;
}
/* El logo no rota al pasar el ratón (eso era para la varita) */
#pedro-ai-app .tq-wb-item-wand.tq-wb-item-wand-logo:hover{
  transform:scale(1.1)!important;background:rgba(108,92,231,.10);
}

/* ── Logo en las cabeceras del menú y la previsualización de IA ── */
#pedro-ai-app .tq-wand-menu-head{ display:flex!important;align-items:center;gap:7px; }
#pedro-ai-app .tq-wand-menu-head .tq-ti-mark{ width:16px;height:16px;border-radius:5px;flex:0 0 auto; }
#pedro-ai-app .tq-wand-pv-head{ display:flex!important;align-items:center;gap:8px; }
#pedro-ai-app .tq-wand-pv-head .tq-ti-mark{ width:18px;height:18px;border-radius:5px;flex:0 0 auto; }

/* ── SEMÁFORO: fondo transparente al dejarlo (colapsado y no seleccionado)
   en CUALQUIER modo, no solo en pantalla completa. Antes solo se aplicaba
   dentro de .pedro-whiteboard-mode, por eso en el editor seguía el recuadro
   blanco. Replica el mismo acabado limpio: solo las luces flotando. ── */
#pedro-ai-app .tq-wb-v2 .tq-card-traffic.is-card-collapsed:not(.is-selected){
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
  padding:0!important;
  width:auto!important;
  min-width:28px!important;
}
#pedro-ai-app .tq-wb-v2 .tq-card-traffic.is-card-collapsed:not(.is-selected) .tq-wb-item-head{
  display:none!important;
}
#pedro-ai-app .tq-wb-v2 .tq-card-traffic.is-card-collapsed:not(.is-selected) .tq-wb-item-body,
#pedro-ai-app .tq-wb-v2 .tq-card-traffic.is-card-collapsed:not(.is-selected) .tq-native-card,
#pedro-ai-app .tq-wb-v2 .tq-card-traffic.is-card-collapsed:not(.is-selected) .tq-native-traffic{
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

/* ═══════════════════════════════════════════════════════════════════════
   v6.43.2 — Menú Teeqo Intelligence legible y sin recorte + semáforo centrado
   ═══════════════════════════════════════════════════════════════════════ */

/* El menú y la preview ahora se montan en la raíz de la app con position:fixed
   (lo posiciona el JS) para que la pizarra no los recorte. Reforzamos contraste
   con !important por si alguna regla heredada intentaba oscurecer el texto. */
#pedro-ai-app .tq-wand-menu{
  background:#16161d!important;
  color:#fff!important;
  z-index:2147483646!important;
  max-width:min(260px,92vw)!important;
}
#pedro-ai-app .tq-wand-menu button{ color:#fff!important; background:transparent!important; }
#pedro-ai-app .tq-wand-menu button:hover{ background:rgba(108,92,231,.9)!important; color:#fff!important; }
#pedro-ai-app .tq-wand-menu .tq-wand-undo{ color:#F6C344!important; }
#pedro-ai-app .tq-wand-menu-head{ color:#F6C344!important; }
#pedro-ai-app .tq-wand-menu-head span{ color:#F6C344!important; }
#pedro-ai-app .tq-wand-menu-head .tq-ti-mark{ width:16px;height:16px;border-radius:5px;flex:0 0 auto; }
#pedro-ai-app .tq-wand-preview{ z-index:2147483646!important; max-width:min(340px,92vw)!important; }
#pedro-ai-app .tq-wand-pv-head .tq-ti-mark{ width:18px;height:18px;border-radius:5px;flex:0 0 auto; }

/* SEMÁFORO seleccionado: la carcasa se centra en la tarjeta en vez de quedar
   pegada a la izquierda con un hueco enorme a la derecha. */
#pedro-ai-app .tq-wb-v2 .tq-card-traffic .tq-wb-item-body{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
#pedro-ai-app .tq-wb-v2 .tq-card-traffic .tq-native-traffic{ margin:auto!important; }

/* Logo Teeqo Intelligence dentro del botón "Analizar pizarra" */
#pedro-ai-app .tq-wb-ai-btn .tq-ai-btn-logo{
  width:18px;height:18px;border-radius:5px;object-fit:contain;
  vertical-align:-4px;margin-right:2px;display:inline-block;
}

/* ═══════════════════════════════════════════════════════════════════════
   v6.43.3 — Carril de herramientas: el contenido nunca desborda su tarjeta.
   Antes, al contraerse el carril, etiquetas y lecturas se cortaban a media
   letra ("Negro"→"N", "Blanco"→"Blanc"). Ahora se ajustan con elipsis y las
   tarjetas/encabezados pueden encoger (min-width:0).
   ═══════════════════════════════════════════════════════════════════════ */
#pedro-ai-app .tq-wb-v3-rail{ min-width:0 !important; }
#pedro-ai-app .tq-wb-v3-rail-card{ box-sizing:border-box !important; min-width:0 !important; max-width:100% !important; }
#pedro-ai-app .tq-wb-v3-color-head{ min-width:0 !important; }
#pedro-ai-app .tq-wb-v3-color-name{
  min-width:0 !important; max-width:100% !important;
  overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important;
}
#pedro-ai-app .tq-wb-v3-settings-card .tq-wb-field-head{ min-width:0 !important; }
#pedro-ai-app .tq-wb-v3-settings-card .tq-wb-field-head output,
#pedro-ai-app .tq-wb-v3-settings-card #tq-wb-size-value,
#pedro-ai-app .tq-wb-v3-settings-card .tq-wb-bg{
  min-width:0 !important; max-width:100% !important;
  overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   v6.43.4 — El carril NO se encoge al ocultar el dock.
   El estado "abierto" pasó a 132px (v6.47 "More stable left rail") pero la
   regla dock-hidden base seguía en 92px, así que ocultar herramientas
   estrechaba el carril 40px. Igualamos el ancho al del estado abierto.
   ═══════════════════════════════════════════════════════════════════════ */
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3.tq-wb-dock-hidden .tq-wb-v3-workspace,
#pedro-ai-app .tq-wb-v3.tq-wb-dock-hidden .tq-wb-v3-workspace {
  grid-template-columns: 132px minmax(0, 1fr) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   v6.43.5 — Scrollbar de la sidebar de la plataforma: oculta cuando no se usa.
   Por defecto el thumb es transparente; solo aparece mientras se hace scroll
   (clase .is-scrolling que pone el JS) — y al pasar el ratón, como cortesía.
   ═══════════════════════════════════════════════════════════════════════ */
#pedro-ai-app .pedro-wow-nav,
#pedro-ai-app .pedro-wow-sidebar{
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
#pedro-ai-app .pedro-wow-nav::-webkit-scrollbar,
#pedro-ai-app .pedro-wow-sidebar::-webkit-scrollbar{ width: 8px; height: 8px; }
#pedro-ai-app .pedro-wow-nav::-webkit-scrollbar-thumb,
#pedro-ai-app .pedro-wow-sidebar::-webkit-scrollbar-thumb{
  background: transparent;
  border-radius: 999px;
  transition: background .35s ease;
}
#pedro-ai-app .pedro-wow-nav::-webkit-scrollbar-track,
#pedro-ai-app .pedro-wow-sidebar::-webkit-scrollbar-track{ background: transparent; }

/* Visible solo al hacer scroll (clase .is-scrolling puesta por el JS) */
#pedro-ai-app .pedro-wow-nav.is-scrolling,
#pedro-ai-app .pedro-wow-sidebar.is-scrolling{
  scrollbar-color: rgba(255,255,255,.30) transparent;
}
#pedro-ai-app .pedro-wow-nav.is-scrolling::-webkit-scrollbar-thumb,
#pedro-ai-app .pedro-wow-sidebar.is-scrolling::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.30);
}

/* ═══════════════════════════════════════════════════════════════════════
   v6.54.0 — TEMA TAP SPANISH para toda la plataforma.
   La app y la plataforma se sienten un mismo producto: fondo lavanda,
   acento índigo #6C5CE7 (remapeando la familia --red por variables, que se
   usa en ~80 sitios), sidebar con el degradado púrpura del hero de la app,
   esquinas más redondeadas, sombras violeta y titulares Nunito 900.
   Los semáforos, verdes/ámbar de estado y colores pedagógicos hardcodeados
   no cambian (siguen siendo semánticos).
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  /* Acento: la familia "red" pasa a índigo Tap Spanish (mismo contrato) */
  --red:        #6C5CE7;
  --red-hover:  #5546D6;
  --red-light:  #F1EFFE;
  --red-mid:    #E2DEFC;
  --red-border: rgba(108,92,231,.22);
  --red-glow:   rgba(108,92,231,.14);
  --shadow-red: 0 6px 20px rgba(108,92,231,.28);

  /* Lienzo lavanda de la app */
  --bg:         #E9EBFB;
  --surface:    #FFFFFF;
  --surface-2:  #F3F4FC;
  --border:     rgba(35,33,74,.09);
  --border-2:   rgba(35,33,74,.16);
  --text:       #23214A;
  --text-2:     #4E4C74;
  /* ══════════════════════════════════════════════════════════════════
     ESTE :root ES EL QUE MANDA — Y ESO SE DESCUBRIÓ TARDE

     Hay otro :root con estos mismos nombres arriba del archivo. Los dos
     tienen la misma especificidad, así que gana el de abajo: ESTE. Los
     --text-* de arriba llevan tiempo sin pintar nada.

     Importa porque la prueba que vigila que el aula y el panel compartan
     paleta leía el PRIMER --text-3 que encontraba, o sea el muerto. Iba en
     verde comparando un valor que ningún profesor ha visto nunca.

     Y lo que sí se ve fallaba: sobre el lienzo lavanda #E9EBFB, --text-3
     daba 3,22:1 y --text-4 2,73:1, contra el 4,5 que pide la norma. Es la
     letra secundaria de todo el panel — los subtítulos de las tarjetas,
     los contadores, las fechas.

     Bajados por su propio matiz, que el panel es lavanda a propósito y no
     se le cambia el color: solo se le sube el contraste.
     ══════════════════════════════════════════════════════════════════ */
  --text-3:     #5C5B78;   /* 5,51:1 sobre el lienzo · 6,52:1 sobre tarjeta */
  --text-4:     #696780;   /* 4,61:1 sobre el lienzo · 5,45:1 sobre tarjeta */

  /* Redondez y sombras estilo app */
  --r:          14px;
  --r-lg:       18px;
  --r-xl:       26px;
  --shadow-xs:  0 2px 6px rgba(84,76,190,.08);
  --shadow-sm:  0 6px 18px rgba(84,76,190,.10);
  --shadow-md:  0 14px 40px rgba(84,76,190,.14);

  /* Wow layout: fondo con orbes + sidebar púrpura (el hero de la app) */
  --wow-bg: radial-gradient(circle at 12% 6%, rgba(124,108,232,.16), transparent 34%),
            radial-gradient(circle at 88% 16%, rgba(77,157,247,.13), transparent 30%),
            radial-gradient(circle at 78% 90%, rgba(249,117,68,.09), transparent 32%),
            linear-gradient(180deg, #E9EBFB 0%, #DFE2F8 100%);
  --wow-sidebar: linear-gradient(160deg, #6A55D8 0%, #5A46C8 52%, #4B3AB4 100%);
  --wow-sidebar-border: rgba(255,255,255,.20);
  --wow-sidebar-soft: rgba(255,255,255,.13);
  --wow-sidebar-strong: rgba(255,255,255,.22);
  --wow-main-border: rgba(35,33,74,.08);
  --wow-card-shadow: 0 24px 60px rgba(84,76,190,.16);
}

/* Titulares con la redondez de la app */
:root{ --font-head: 'Nunito', 'Outfit', 'Plus Jakarta Sans', sans-serif; }
#pedro-ai-app h1, #pedro-ai-app h2, #pedro-ai-app h3,
#pedro-ai-app .pedro-wow-brand-title{
  font-family: var(--font-head);
  letter-spacing: -.02em;
}

/* Sidebar: sombra violeta acorde al degradado púrpura */
#pedro-ai-app .pedro-wow-sidebar{
  box-shadow: 0 24px 56px rgba(66,53,158,.38) !important;
}
/* Item de navegación activo: pastilla blanca con texto índigo (como la
   pestaña activa de la tab bar de la app) */
#pedro-ai-app .pedro-wow-nav-item.active{
  background: #FFFFFF !important;
  color: #4B3AB4 !important;
  box-shadow: 0 8px 20px rgba(20,16,70,.24) !important;
}
#pedro-ai-app .pedro-wow-nav-item.active *{ color: #4B3AB4 !important; }

/* Botones primarios: píldora con degradado índigo.
   v6.57.1 — FIX contraste: (1) los botones que además llevan la clase
   -secondary quedan FUERA del forzado índigo (antes salían lilas con texto
   oscuro); (2) el texto/icono se fuerza a blanco para que ninguna variante
   herede tinta oscura sobre el degradado. */
#pedro-ai-app .pedro-btn-primary, #pedro-ai-app .p-btn-primary,
#pedro-ai-app .pedro-btn:not(.pedro-btn-secondary):not(.p-btn-secondary),
#pedro-ai-app .p-btn:not(.pedro-btn-secondary):not(.p-btn-secondary){
  border-radius: 999px !important;
  background: linear-gradient(135deg, #6C5CE7, #5546D6) !important; /* #7B6CF0 dejaba el texto blanco en 4.00:1 */
  box-shadow: 0 10px 24px rgba(94,84,220,.32) !important;
  font-weight: 800 !important;
  color: #fff !important;
}
#pedro-ai-app .pedro-btn-primary *, #pedro-ai-app .p-btn-primary *,
#pedro-ai-app .pedro-btn:not(.pedro-btn-secondary):not(.p-btn-secondary) *,
#pedro-ai-app .p-btn:not(.pedro-btn-secondary):not(.p-btn-secondary) *{
  color: #fff !important;
}
#pedro-ai-app .pedro-btn-primary:hover,
#pedro-ai-app .pedro-btn:not(.pedro-btn-secondary):not(.p-btn-secondary):hover,
#pedro-ai-app .p-btn:not(.pedro-btn-secondary):not(.p-btn-secondary):hover{
  background: linear-gradient(135deg, #8A7BF5, #6152E0) !important;
}
/* Secundarios: píldora blanca con borde suave */
#pedro-ai-app .pedro-btn-secondary, #pedro-ai-app .p-btn-secondary{
  border-radius: 999px !important;
}

/* Tarjetas y paneles del shell principal: aire y esquinas de la app */
#pedro-ai-app .pedro-wow-panel-stage{
  border-radius: var(--r-xl) !important;
}

/* Inputs con el estilo de la app (fondo lila suave, focus índigo) */
#pedro-ai-app input[type="text"]:focus,
#pedro-ai-app input[type="password"]:focus,
#pedro-ai-app input[type="email"]:focus,
#pedro-ai-app input[type="number"]:focus,
#pedro-ai-app textarea:focus,
#pedro-ai-app select:focus{
  border-color: var(--red) !important;
  box-shadow: 0 0 0 3px rgba(108,92,231,.16) !important;
}

/* Scrollbar de la sidebar (auto-ocultable de v6.43.5): tono claro sobre púrpura */
#pedro-ai-app .pedro-wow-nav.is-scrolling,
#pedro-ai-app .pedro-wow-sidebar.is-scrolling{
  scrollbar-color: rgba(255,255,255,.42) transparent;
}
#pedro-ai-app .pedro-wow-nav.is-scrolling::-webkit-scrollbar-thumb,
#pedro-ai-app .pedro-wow-sidebar.is-scrolling::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.42);
}

/* v6.55.32 - Whiteboard window polish aligned with Tap Spanish */
#pedro-ai-app .tq-wb-layer-badge,
#pedro-ai-app .tq-wb-item-wand {
  display: none !important;
}
#pedro-ai-app #tq-wb-add-transformer,
#pedro-ai-app .tq-add-transformer {
  display: none !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-item {
  display: flex !important;
  flex-direction: column !important;
  min-height: 96px !important;
  border-width: 1.5px !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 18px 44px rgba(84,76,190,.14) !important;
}
#pedro-ai-app .tq-wb-v2 .tq-wb-item:hover {
  box-shadow: 0 22px 52px rgba(84,76,190,.18) !important;
}
#pedro-ai-app .tq-wb-v2 .tq-wb-item.is-selected {
  outline: 3px solid rgba(108,92,231,.28) !important;
  outline-offset: 4px !important;
  box-shadow: 0 24px 62px rgba(84,76,190,.24) !important;
}
#pedro-ai-app .tq-wb-v2 .tq-wb-item-head {
  min-height: 42px !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 9px 10px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,245,255,.92)) !important;
  border-bottom: 1px solid rgba(35,33,74,.08) !important;
}
#pedro-ai-app .tq-wb-v2 .tq-wb-item-title {
  min-width: 0 !important;
  color: var(--text, #23214A) !important;
  font-family: var(--font-head) !important;
  font-size: clamp(13px, calc(15px * var(--tq-scale,1)), 22px) !important;
  font-weight: 950 !important;
  letter-spacing: -.01em !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
#pedro-ai-app .tq-wb-v2 .tq-wb-item-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  background: rgba(255,255,255,.78) !important;
  -webkit-overflow-scrolling: touch !important;
}
#pedro-ai-app .tq-wb-v2 .tq-wb-item-close,
#pedro-ai-app .tq-wb-v2 .tq-wb-item-paint,
#pedro-ai-app .tq-wb-v2 .tq-wb-item-lock,
#pedro-ai-app .tq-wb-v2 .tq-wb-item-duplicate,
#pedro-ai-app .tq-wb-v2 .tq-wb-item-speak,
#pedro-ai-app .tq-wb-v2 .tq-wb-item-star {
  display: inline-grid !important;
  place-items: center !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border: 1px solid rgba(108,92,231,.14) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.86) !important;
  color: #5546D6 !important;
  box-shadow: 0 5px 12px rgba(84,76,190,.08) !important;
  font-size: 13px !important;
  line-height: 1 !important;
  transition: transform .14s ease, background .14s ease, border-color .14s ease, color .14s ease !important;
}
#pedro-ai-app .tq-wb-v2 .tq-wb-item-close:hover,
#pedro-ai-app .tq-wb-v2 .tq-wb-item-paint:hover,
#pedro-ai-app .tq-wb-v2 .tq-wb-item-lock:hover,
#pedro-ai-app .tq-wb-v2 .tq-wb-item-duplicate:hover,
#pedro-ai-app .tq-wb-v2 .tq-wb-item-speak:hover,
#pedro-ai-app .tq-wb-v2 .tq-wb-item-star:hover {
  transform: translateY(-1px) !important;
  background: #6C5CE7 !important;
  border-color: #6C5CE7 !important;
  color: #fff !important;
}
#pedro-ai-app .tq-wb-v2 .tq-wb-item-close.is-confirming {
  width: auto !important;
  min-width: 72px !important;
  padding: 0 10px !important;
  background: #6C5CE7 !important;
  color: #fff !important;
}
#pedro-ai-app .tq-wb-v2 .tq-card-note {
  transform: none !important;
  border-radius: 20px !important;
}
#pedro-ai-app .tq-wb-v2 .tq-card-note::after {
  display: none !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-elements-v6203 button.pedro-btn-secondary {
  min-height: 58px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(108,92,231,.16) !important;
  background: linear-gradient(135deg, #FFFFFF, #F7F6FF) !important;
  color: var(--text, #23214A) !important;
  box-shadow: 0 8px 22px rgba(84,76,190,.08) !important;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease !important;
}
#pedro-ai-app .tq-wb-v2 .tq-wb-elements-v6203 button.pedro-btn-secondary:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(108,92,231,.34) !important;
  background: linear-gradient(135deg, #FFFFFF, #F1EFFE) !important;
  box-shadow: 0 14px 30px rgba(84,76,190,.14) !important;
}
#pedro-ai-app .tq-wb-v2 .tq-wb-elements-v6203 button.pedro-btn-secondary b {
  color: var(--text, #23214A) !important;
}
#pedro-ai-app .tq-wb-v2 .tq-wb-elements-v6203 button.pedro-btn-secondary small {
  color: var(--text-3, #807FA6) !important;
}

#pedro-ai-app .tq-wb-v2 .tq-card-quick-chat {
  min-width: min(340px, calc(100% - 18px)) !important;
  border-color: #8A7BF5 !important;
}
#pedro-ai-app .tq-wb-v2 .tq-card-quick-chat .tq-wb-item-body {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  padding: 12px !important;
}
#pedro-ai-app .tq-wb-v2 .tq-wb-chat-widget {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto auto !important;
  gap: 9px !important;
  height: 100% !important;
  min-height: 0 !important;
}
#pedro-ai-app .tq-wb-v2 .tq-wb-chat-log {
  min-height: 0 !important;
  max-height: none !important;
  overflow: auto !important;
  padding: 6px !important;
  border-radius: 16px !important;
  background: #F8F7FF !important;
  border: 1px solid rgba(108,92,231,.10) !important;
}
#pedro-ai-app .tq-wb-v2 .tq-wb-chat-form {
  grid-template-columns: minmax(0, 1fr) 42px !important;
  align-items: stretch !important;
}
#pedro-ai-app .tq-wb-v2 .tq-wb-chat-form textarea {
  min-height: 44px !important;
  max-height: none !important;
  resize: none !important;
}
#pedro-ai-app .tq-wb-v2 .tq-wb-chat-form button {
  min-width: 42px !important;
  padding: 0 !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #6C5CE7, #5546D6) !important; /* #7B6CF0 dejaba el texto blanco en 4.00:1 */
  color: #fff !important; /* v6.57.1 — el icono heredaba tinta oscura sobre índigo */
}

#pedro-ai-app .tq-wb-v2 .tq-card-student-note {
  min-width: min(260px, calc(100% - 18px)) !important;
  border-style: solid !important;
  border-color: rgba(108,92,231,.24) !important;
  border-radius: 22px !important;
  box-shadow: 0 18px 44px rgba(84,76,190,.16) !important;
  transform: none !important;
}
#pedro-ai-app .tq-wb-v2 .tq-card-student-note .tq-wb-item-head {
  background: linear-gradient(135deg, #FFFFFF, #F4F2FF) !important;
  border-bottom-color: rgba(108,92,231,.13) !important;
}
#pedro-ai-app .tq-wb-v2 .tq-card-student-note .tq-wb-item-title {
  display: grid !important;
  gap: 1px !important;
  color: #4B3AB4 !important;
  white-space: normal !important;
}
#pedro-ai-app .tq-wb-v2 .tq-card-student-note .tq-wb-item-title::before {
  content: "Nota de alumno" !important;
  color: var(--text-3, #807FA6) !important;
  font-size: 9px !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
#pedro-ai-app .tq-wb-v2 .tq-card-student-note .tq-student-note-body,
#pedro-ai-app .tq-wb-v2 .tq-card-student-note .tq-wb-item-body {
  padding: 16px !important;
  min-height: 110px !important;
  background: rgba(255,255,255,.90) !important;
  color: var(--text, #23214A) !important;
  font-family: var(--font-head) !important;
  font-size: clamp(16px, calc(18px * var(--tq-scale,1)), 42px) !important;
  font-weight: 850 !important;
  line-height: 1.34 !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
}
#pedro-ai-app .tq-wb-v2 .tq-card-student-note::before {
  content: attr(data-student-source) !important;
  position: absolute !important;
  right: 14px !important;
  bottom: 8px !important;
  z-index: 2 !important;
  color: rgba(78,76,116,.58) !important;
  font-size: 9px !important;
  font-weight: 950 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  pointer-events: none !important;
}
#pedro-ai-app .tq-wb-v2 .tq-card-student-note.is-starred {
  border-color: #F6C344 !important;
  box-shadow: 0 0 0 3px rgba(246,195,68,.24), 0 18px 44px rgba(84,76,190,.16) !important;
}
#pedro-ai-app .tq-wb-v2 .tq-card-student-note.is-starred .tq-wb-item-star {
  background: #FFF7CC !important;
  border-color: #F6C344 !important;
  color: #92400E !important;
}

/* v6.55.33 - Whiteboard visual lift: sidebar studio + expressive windows */
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-dock,
#pedro-ai-app .tq-wb-v3-dock {
  padding: 12px !important;
  border: 1px solid rgba(108,92,231,.13) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 15% -5%, rgba(108,92,231,.18), transparent 34%),
    radial-gradient(circle at 95% 12%, rgba(246,195,68,.16), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.74), rgba(246,245,255,.94)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 22px 58px rgba(84,76,190,.16) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
}

#pedro-ai-app .tq-wb-v3-dock .tq-wb-dock-panel {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(108,92,231,.14) !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.86) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 16px 34px rgba(84,76,190,.11) !important;
}

#pedro-ai-app .tq-wb-v3-dock .tq-wb-dock-panel + .tq-wb-dock-panel {
  margin-top: 12px !important;
}

#pedro-ai-app .tq-wb-v3-dock .tq-wb-dock-panel > summary {
  min-height: 58px !important;
  padding: 12px 13px !important;
  gap: 10px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(245,243,255,.94)) !important;
}

#pedro-ai-app .tq-wb-v3-dock .tq-wb-dock-panel > summary::before {
  content: "" !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 34px !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #6C5CE7, #5546D6) !important;
  color: #fff !important;
  box-shadow: 0 9px 18px rgba(84,76,190,.22) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

#pedro-ai-app .tq-wb-v3-dock .tq-wb-v3-intelligence > summary::before {
  content: "AI" !important;
  background: linear-gradient(135deg, #2563EB, #7C3AED) !important;
}

#pedro-ai-app .tq-wb-v3-dock .tq-wb-v3-assets > summary::before {
  content: "+" !important;
  background: linear-gradient(135deg, #0F9D75, #6C5CE7) !important;
  font-size: 20px !important;
}

#pedro-ai-app .tq-wb-v3-dock .tq-wb-v3-stamps > summary::before {
  content: "★" !important;
  background: linear-gradient(135deg, #F6C344, #F59E0B) !important;
}

#pedro-ai-app .tq-wb-v3-dock .tq-wb-dock-panel > summary span {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  color: #23214A !important;
  font-size: 15px !important;
  line-height: 1.05 !important;
}

#pedro-ai-app .tq-wb-v3-dock .tq-wb-dock-panel > summary small {
  max-width: 92px !important;
  color: #7E78A7 !important;
  font-size: 9px !important;
  line-height: 1.15 !important;
}

#pedro-ai-app .tq-wb-v3-dock .tq-wb-dock-panel > summary::after {
  flex: 0 0 28px !important;
  width: 28px !important;
  height: 28px !important;
  border: 1px solid rgba(108,92,231,.16) !important;
  background: #fff !important;
  color: #6C5CE7 !important;
  box-shadow: 0 6px 14px rgba(84,76,190,.10) !important;
}

#pedro-ai-app .tq-wb-v3-dock .tq-wb-dock-panel[open] > summary::after {
  background: #23214A !important;
  border-color: #23214A !important;
  color: #fff !important;
}

#pedro-ai-app .tq-wb-v3-dock .tq-wb-studio {
  border-radius: 0 0 24px 24px !important;
  background:
    linear-gradient(180deg, #FFFFFF 0%, #F8F7FF 52%, #FFF7E7 100%) !important;
}

#pedro-ai-app .tq-wb-v3-dock .tq-wb-lesson-hero {
  border-radius: 20px !important;
  box-shadow: 0 16px 30px rgba(108,92,231,.24), inset 0 1px 0 rgba(255,255,255,.28) !important;
}

#pedro-ai-app .tq-wb-v3-assets .tq-wb-elements-v6203 {
  gap: 13px !important;
}

#pedro-ai-app .tq-wb-v3-element-group {
  padding: 13px !important;
  border: 1px solid rgba(255,255,255,.82) !important;
  border-radius: 24px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.90),
    0 14px 30px rgba(84,76,190,.09) !important;
}

#pedro-ai-app .tq-wb-v3-group-label {
  margin-bottom: 10px !important;
  font-size: 10px !important;
  letter-spacing: .085em !important;
}

#pedro-ai-app .tq-wb-v3-assets .tq-wb-elements-v6203 button {
  --tq-tool-accent: #6C5CE7;
  --tq-tool-soft: #F4F2FF;
  position: relative !important;
  isolation: isolate !important;
  min-height: 66px !important;
  padding: 10px 11px !important;
  border: 1px solid rgba(255,255,255,.82) !important;
  border-radius: 20px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), var(--tq-tool-soft)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 10px 20px rgba(84,76,190,.10) !important;
}

#pedro-ai-app .tq-wb-v3-assets .tq-wb-elements-v6203 button::before {
  position: relative !important;
  z-index: 1 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 15px !important;
  background: linear-gradient(135deg, var(--tq-tool-accent), #5546D6) !important;
  color: #fff !important;
  box-shadow: 0 9px 18px rgba(84,76,190,.20) !important;
}

#pedro-ai-app .tq-wb-v3-assets .tq-wb-elements-v6203 button::after {
  content: "" !important;
  position: absolute !important;
  inset: auto 13px 9px 58px !important;
  z-index: -1 !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, var(--tq-tool-accent), transparent) !important;
  opacity: .28 !important;
}

#pedro-ai-app .tq-wb-v3-assets .tq-wb-elements-v6203 button:hover {
  transform: translateY(-2px) scale(1.01) !important;
  border-color: rgba(108,92,231,.26) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 16px 30px rgba(84,76,190,.16) !important;
}

#pedro-ai-app .tq-wb-v3-assets .tq-wb-elements-v6203 button b {
  color: #23214A !important;
  font-size: 13px !important;
  letter-spacing: -.01em !important;
}

#pedro-ai-app .tq-wb-v3-assets .tq-wb-elements-v6203 button small {
  color: #6E6A91 !important;
  font-size: 10.3px !important;
}

#pedro-ai-app .tq-wb-v3-assets .tq-add-objective { --tq-tool-accent: #6C5CE7; --tq-tool-soft: #F4F2FF; }
#pedro-ai-app .tq-wb-v3-assets .tq-add-title { --tq-tool-accent: #7C3AED; --tq-tool-soft: #F6F0FF; }
#pedro-ai-app .tq-wb-v3-assets .tq-add-note { --tq-tool-accent: #F6C344; --tq-tool-soft: #FFF8DB; }
#pedro-ai-app .tq-wb-v3-assets .tq-add-writing-box { --tq-tool-accent: #2563EB; --tq-tool-soft: #EEF5FF; }
#pedro-ai-app .tq-wb-v3-assets .tq-add-timer { --tq-tool-accent: #F59E0B; --tq-tool-soft: #FFF4DE; }
#pedro-ai-app .tq-wb-v3-assets .tq-add-card { --tq-tool-accent: #2563EB; --tq-tool-soft: #EEF5FF; }
#pedro-ai-app .tq-wb-v3-assets .tq-add-vocab { --tq-tool-accent: #0F9D75; --tq-tool-soft: #EAFBF5; }
#pedro-ai-app .tq-wb-v3-assets .tq-add-verbs { --tq-tool-accent: #2563EB; --tq-tool-soft: #EEF5FF; }
#pedro-ai-app .tq-wb-v3-assets .tq-add-builder { --tq-tool-accent: #10B981; --tq-tool-soft: #ECFDF5; }
#pedro-ai-app .tq-wb-v3-assets .tq-add-pronun { --tq-tool-accent: #14B8A6; --tq-tool-soft: #EDFFFB; }
#pedro-ai-app .tq-wb-v3-assets .tq-add-spinner { --tq-tool-accent: #7C3AED; --tq-tool-soft: #F6F0FF; }
#pedro-ai-app .tq-wb-v3-assets .tq-add-cloud { --tq-tool-accent: #38BDF8; --tq-tool-soft: #EFFBFF; }
#pedro-ai-app .tq-wb-v3-assets .tq-add-traffic { --tq-tool-accent: #22C55E; --tq-tool-soft: #F0FDF4; }
#pedro-ai-app .tq-wb-v3-assets .tq-add-exit { --tq-tool-accent: #F59E0B; --tq-tool-soft: #FFF4DE; }
#pedro-ai-app .tq-wb-v3-assets .tq-add-collab { --tq-tool-accent: #E86EA7; --tq-tool-soft: #FFF0F7; }
#pedro-ai-app .tq-wb-v3-assets .tq-add-chat { --tq-tool-accent: #6C5CE7; --tq-tool-soft: #F4F2FF; }
#pedro-ai-app .tq-wb-v3-assets .tq-add-image { --tq-tool-accent: #7C3AED; --tq-tool-soft: #F6F0FF; }
#pedro-ai-app .tq-wb-v3-assets .tq-add-youtube { --tq-tool-accent: #E94B5F; --tq-tool-soft: #FFF1F3; }
#pedro-ai-app .tq-wb-v3-assets .tq-add-library { --tq-tool-accent: #23214A; --tq-tool-soft: #F4F4FA; }

#pedro-ai-app .tq-wb-v3-stamps .tq-whiteboard-quickbar {
  gap: 8px !important;
  padding: 12px !important;
  background: linear-gradient(180deg, #fff, #FFF8DB) !important;
}

#pedro-ai-app .tq-wb-v3-stamps .tq-wb-stamp {
  width: 42px !important;
  height: 42px !important;
  border: 1px solid rgba(246,195,68,.24) !important;
  border-radius: 17px !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 10px 18px rgba(146,64,14,.09) !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-item {
  --tq-card-accent: #6C5CE7;
  --tq-card-tint: #F4F2FF;
  border-radius: 24px !important;
  box-shadow:
    inset 0 6px 0 var(--tq-card-accent),
    0 22px 54px rgba(84,76,190,.18),
    0 4px 0 rgba(35,33,74,.035) !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-item:hover {
  box-shadow:
    inset 0 6px 0 var(--tq-card-accent),
    0 28px 64px rgba(84,76,190,.22),
    0 4px 0 rgba(35,33,74,.035) !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-item.is-selected {
  outline: 3px solid color-mix(in srgb, var(--tq-card-accent) 28%, transparent) !important;
  box-shadow:
    inset 0 6px 0 var(--tq-card-accent),
    0 0 0 7px rgba(255,255,255,.88),
    0 30px 70px rgba(84,76,190,.26) !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-item:not(.tq-card-title):not(.tq-wb-item-stamp) .tq-wb-item-head {
  min-height: 48px !important;
  padding: 13px 12px 9px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), var(--tq-card-tint)) !important;
  border-bottom: 1px solid rgba(108,92,231,.10) !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-item:not(.tq-card-title):not(.tq-wb-item-stamp) .tq-wb-item-body {
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.82)) !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-item-title {
  letter-spacing: 0 !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-item-close,
#pedro-ai-app .tq-wb-v2 .tq-wb-item-paint,
#pedro-ai-app .tq-wb-v2 .tq-wb-item-lock,
#pedro-ai-app .tq-wb-v2 .tq-wb-item-duplicate,
#pedro-ai-app .tq-wb-v2 .tq-wb-item-speak,
#pedro-ai-app .tq-wb-v2 .tq-wb-item-star {
  border-color: color-mix(in srgb, var(--tq-card-accent) 20%, #fff) !important;
  background: rgba(255,255,255,.94) !important;
  color: var(--tq-card-accent) !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-item-close:hover,
#pedro-ai-app .tq-wb-v2 .tq-wb-item-paint:hover,
#pedro-ai-app .tq-wb-v2 .tq-wb-item-lock:hover,
#pedro-ai-app .tq-wb-v2 .tq-wb-item-duplicate:hover,
#pedro-ai-app .tq-wb-v2 .tq-wb-item-speak:hover,
#pedro-ai-app .tq-wb-v2 .tq-wb-item-star:hover {
  background: var(--tq-card-accent) !important;
  border-color: var(--tq-card-accent) !important;
  color: #fff !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-item-resizer {
  width: 28px !important;
  height: 28px !important;
  right: 6px !important;
  bottom: 6px !important;
  border-radius: 12px !important;
  background:
    linear-gradient(135deg, transparent 0 42%, rgba(255,255,255,.92) 43% 50%, transparent 51% 61%, rgba(255,255,255,.92) 62% 70%, transparent 71%),
    linear-gradient(135deg, var(--tq-card-accent), #5546D6) !important;
  box-shadow: 0 8px 18px rgba(84,76,190,.22) !important;
  opacity: .72 !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-item:hover .tq-wb-item-resizer,
#pedro-ai-app .tq-wb-v2 .tq-wb-item.is-selected .tq-wb-item-resizer {
  opacity: 1 !important;
}

#pedro-ai-app .tq-wb-v2 .tq-card-note,
#pedro-ai-app .tq-wb-v2 .tq-native-note-card { --tq-card-accent: #F6C344; --tq-card-tint: #FFF8DB; }
#pedro-ai-app .tq-wb-v2 .tq-card-student-note { --tq-card-accent: #8A7BF5; --tq-card-tint: #F4F2FF; }
#pedro-ai-app .tq-wb-v2 .tq-card-quick-chat { --tq-card-accent: #6C5CE7; --tq-card-tint: #F4F2FF; }
#pedro-ai-app .tq-wb-v2 .tq-card-collab { --tq-card-accent: #E86EA7; --tq-card-tint: #FFF0F7; }
#pedro-ai-app .tq-wb-v2 .tq-card-writing-box { --tq-card-accent: #2563EB; --tq-card-tint: #EEF5FF; }
#pedro-ai-app .tq-wb-v2 .tq-card-objective,
#pedro-ai-app .tq-wb-v2 .tq-card-title { --tq-card-accent: #6C5CE7; --tq-card-tint: #F4F2FF; }
#pedro-ai-app .tq-wb-v2 .tq-card-flip,
#pedro-ai-app .tq-wb-v2 .tq-card-verbs,
#pedro-ai-app .tq-wb-v2 .tq-card-builder { --tq-card-accent: #2563EB; --tq-card-tint: #EEF5FF; }
#pedro-ai-app .tq-wb-v2 .tq-card-vocab,
#pedro-ai-app .tq-wb-v2 .tq-card-pronun,
#pedro-ai-app .tq-wb-v2 .tq-card-traffic { --tq-card-accent: #0F9D75; --tq-card-tint: #EAFBF5; }
#pedro-ai-app .tq-wb-v2 .tq-card-spinner,
#pedro-ai-app .tq-wb-v2 .tq-card-cloud,
#pedro-ai-app .tq-wb-v2 .tq-card-image,
#pedro-ai-app .tq-wb-v2 .tq-card-library { --tq-card-accent: #7C3AED; --tq-card-tint: #F6F0FF; }
#pedro-ai-app .tq-wb-v2 .tq-card-timer,
#pedro-ai-app .tq-wb-v2 .tq-card-exit { --tq-card-accent: #F59E0B; --tq-card-tint: #FFF4DE; }
#pedro-ai-app .tq-wb-v2 .tq-card-youtube { --tq-card-accent: #E94B5F; --tq-card-tint: #FFF1F3; }
#pedro-ai-app .tq-wb-v2 .tq-card-board-game,
#pedro-ai-app .tq-wb-v2 .tq-card-convdeck,
#pedro-ai-app .tq-wb-v2 .tq-card-libdeck { --tq-card-accent: #23214A; --tq-card-tint: #F4F4FA; }

#pedro-ai-app .tq-wb-v2 .tq-card-student-note {
  min-width: min(280px, calc(100% - 18px)) !important;
}

#pedro-ai-app .tq-wb-v2 .tq-card-student-note .tq-wb-item-head {
  padding-top: 14px !important;
}

#pedro-ai-app .tq-wb-v2 .tq-card-student-note .tq-wb-item-title::before {
  width: fit-content !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  background: rgba(138,123,245,.12) !important;
  color: #5B4ACF !important;
}

#pedro-ai-app .tq-wb-v2 .tq-card-student-note .tq-student-note-body,
#pedro-ai-app .tq-wb-v2 .tq-card-student-note .tq-wb-item-body {
  padding: 18px 18px 24px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(138,123,245,.13), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,249,255,.94)) !important;
  font-size: clamp(17px, calc(19px * var(--tq-scale,1)), 44px) !important;
}

#pedro-ai-app .tq-wb-v2 .tq-card-quick-chat .tq-wb-item-body {
  padding: 14px !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-chat-widget {
  gap: 10px !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-chat-log {
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(108,92,231,.10), transparent 32%),
    linear-gradient(180deg, #FFFFFF, #F7F5FF) !important;
  border-color: rgba(108,92,231,.15) !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-chat-form textarea {
  min-height: 46px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.96) !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-chat-form button {
  border-radius: 16px !important;
  box-shadow: 0 10px 18px rgba(84,76,190,.22) !important;
}

#pedro-ai-app .tq-wb-v2 .tq-card-collab .tq-wb-item-body,
#pedro-ai-app .tq-wb-v2 .tq-card-quick-chat .tq-wb-item-body,
#pedro-ai-app .tq-wb-v2 .tq-card-writing-box .tq-wb-item-body,
#pedro-ai-app .tq-wb-v2 .tq-card-vocab .tq-wb-item-body,
#pedro-ai-app .tq-wb-v2 .tq-card-verbs .tq-wb-item-body,
#pedro-ai-app .tq-wb-v2 .tq-card-builder .tq-wb-item-body,
#pedro-ai-app .tq-wb-v2 .tq-card-pronun .tq-wb-item-body,
#pedro-ai-app .tq-wb-v2 .tq-card-cloud .tq-wb-item-body,
#pedro-ai-app .tq-wb-v2 .tq-card-image .tq-wb-item-body,
#pedro-ai-app .tq-wb-v2 .tq-card-youtube .tq-wb-item-body,
#pedro-ai-app .tq-wb-v2 .tq-card-library .tq-wb-item-body {
  min-height: 0 !important;
  overflow: auto !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-item-body > .tq-native-card,
#pedro-ai-app .tq-wb-v2 .tq-wb-item-body > .tq-fresh-text-card,
#pedro-ai-app .tq-wb-v2 .tq-wb-item-body > .tq-collab-card,
#pedro-ai-app .tq-wb-v2 .tq-wb-item-body > .tq-wb-chat-widget {
  max-width: 100% !important;
  min-height: 0 !important;
}

#pedro-ai-app #tq-wb-add-transformer,
#pedro-ai-app .tq-add-transformer {
  display: none !important;
}

@media (max-width: 640px) {
  #pedro-ai-app .tq-wb-v3-dock {
    padding: 9px !important;
    border-radius: 22px !important;
  }

  #pedro-ai-app .tq-wb-v3-dock .tq-wb-dock-panel {
    border-radius: 20px !important;
  }

  #pedro-ai-app .tq-wb-v3-dock .tq-wb-dock-panel > summary {
    min-height: 52px !important;
  }

  #pedro-ai-app .tq-wb-v3-assets .tq-wb-elements-v6203 button {
    min-height: 60px !important;
  }
}

/* v6.55.34 - Left rail polish + clean note, light timer, larger stamps */
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-rail,
#pedro-ai-app .tq-wb-v3-rail {
  padding: 10px !important;
  gap: 12px !important;
  border: 1px solid rgba(108,92,231,.13) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 18% -4%, rgba(108,92,231,.18), transparent 34%),
    radial-gradient(circle at 90% 18%, rgba(15,157,117,.12), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(247,246,255,.95)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 22px 54px rgba(84,76,190,.14) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
}

#pedro-ai-app .tq-wb-v3-rail-card {
  position: relative !important;
  padding: 12px !important;
  border: 1px solid rgba(255,255,255,.82) !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.90) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 13px 28px rgba(84,76,190,.10) !important;
}

#pedro-ai-app .tq-wb-v3-tool-card {
  background: linear-gradient(180deg, #FFFFFF, #F4F2FF) !important;
}

#pedro-ai-app .tq-wb-v3-color-card {
  background: linear-gradient(180deg, #FFFFFF, #FFF8DB) !important;
}

#pedro-ai-app .tq-wb-v3-settings-card {
  background: linear-gradient(180deg, #FFFFFF, #EAFBF5) !important;
}

#pedro-ai-app .tq-wb-v3-zoom-card {
  background: linear-gradient(180deg, #FFFFFF, #EEF5FF) !important;
}

#pedro-ai-app .tq-wb-v3-rail-label,
#pedro-ai-app .tq-wb-v3-settings-card .tq-wb-field-label,
#pedro-ai-app .tq-wb-v3-settings-card .tq-wb-field-head > span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #514B7B !important;
  font-size: 9.5px !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
}

#pedro-ai-app .tq-wb-v3-rail-label::before {
  content: "" !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 999px !important;
  background: #6C5CE7 !important;
  box-shadow: 0 0 0 4px rgba(108,92,231,.11) !important;
}

#pedro-ai-app .tq-wb-v3-color-card .tq-wb-v3-rail-label::before {
  background: #F6C344 !important;
  box-shadow: 0 0 0 4px rgba(246,195,68,.18) !important;
}

#pedro-ai-app .tq-wb-v3-tools {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

#pedro-ai-app .tq-wb-v3-tools .tq-wb-tool {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 !important;
  border: 1px solid rgba(108,92,231,.13) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(247,246,255,.98)) !important;
  color: #5546D6 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 8px 16px rgba(84,76,190,.09) !important;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease !important;
}

#pedro-ai-app .tq-wb-v3-tools .tq-wb-tool:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(108,92,231,.30) !important;
  background: linear-gradient(135deg, #FFFFFF, #F1EFFE) !important;
  color: #4B3AB4 !important;
  box-shadow: 0 12px 22px rgba(84,76,190,.15) !important;
}

#pedro-ai-app .tq-wb-v3-tools .tq-wb-tool.active,
#pedro-ai-app .tq-wb-v3-tools .tq-wb-tool.active:hover {
  border-color: #6C5CE7 !important;
  background: linear-gradient(135deg, #6C5CE7, #5546D6) !important; /* #7B6CF0 dejaba el texto blanco en 4.00:1 */
  color: #fff !important;
  box-shadow: 0 14px 26px rgba(84,76,190,.26) !important;
}

#pedro-ai-app .tq-wb-v3-tools .tq-wb-tool.active::after {
  content: "" !important;
  position: absolute !important;
  right: 7px !important;
  top: 7px !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 999px !important;
  background: #F6C344 !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.26) !important;
}

#pedro-ai-app .tq-wb-v3-tools .tq-wb-tool-icon {
  width: 22px !important;
  height: 22px !important;
  stroke-width: 2.15px !important;
}

#pedro-ai-app .tq-wb-v3-palette-frame {
  padding: 10px 8px !important;
  border-radius: 18px !important;
  border-color: rgba(246,195,68,.24) !important;
  background: rgba(255,255,255,.72) !important;
}

#pedro-ai-app .tq-wb-v3-colors .tq-wb-color {
  width: 31px !important;
  height: 31px !important;
  min-width: 31px !important;
  min-height: 31px !important;
  border-width: 3px !important;
  box-shadow:
    0 0 0 1px rgba(35,33,74,.14),
    0 7px 14px rgba(35,33,74,.13) !important;
}

#pedro-ai-app .tq-wb-v3-colors .tq-wb-color.active {
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 5px #6C5CE7,
    0 10px 20px rgba(84,76,190,.18) !important;
}

#pedro-ai-app .tq-wb-v3-settings-card .tq-wb-size,
#pedro-ai-app .tq-wb-v3-settings-card .tq-wb-bg-field {
  padding: 8px !important;
  border: 1px solid rgba(15,157,117,.12) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.72) !important;
}

#pedro-ai-app .tq-wb-v3-settings-card #tq-wb-size {
  accent-color: #6C5CE7 !important;
}

#pedro-ai-app .tq-wb-v3-settings-card .tq-wb-bg {
  border-radius: 14px !important;
  border-color: rgba(15,157,117,.18) !important;
  background-color: #fff !important;
}

#pedro-ai-app .tq-wb-v3-zoom-card {
  gap: 7px !important;
}

#pedro-ai-app .tq-wb-v3-zoom-card .pedro-btn-secondary {
  height: 38px !important;
  min-height: 38px !important;
  border: 1px solid rgba(37,99,235,.14) !important;
  border-radius: 15px !important;
  background: rgba(255,255,255,.94) !important;
  color: #2563EB !important;
  box-shadow: 0 8px 16px rgba(37,99,235,.10) !important;
}

#pedro-ai-app .tq-wb-v3-zoom-card .pedro-btn-secondary:hover {
  background: #2563EB !important;
  border-color: #2563EB !important;
  color: #fff !important;
}

#pedro-ai-app .tq-wb-v2 .tq-card-note,
#pedro-ai-app .tq-wb-v2 .tq-native-note-card,
#pedro-ai-app.pedro-whiteboard-mode .tq-card-note,
#pedro-ai-app.pedro-whiteboard-mode .tq-native-note-card {
  --tq-card-accent: #F6C344;
  --tq-card-tint: #FEF3C7;
  --tq-note-bg: #FEF3C7;
  background: var(--tq-note-bg) !important;
  background-image: none !important;
  border-color: #F6C344 !important;
  box-shadow: 0 20px 44px rgba(146,64,14,.15) !important;
}

#pedro-ai-app .tq-wb-v2 .tq-card-note:hover,
#pedro-ai-app .tq-wb-v2 .tq-native-note-card:hover {
  box-shadow: 0 24px 52px rgba(146,64,14,.18) !important;
}

#pedro-ai-app .tq-wb-v2 .tq-card-note .tq-wb-item-head,
#pedro-ai-app .tq-wb-v2 .tq-native-note-card .tq-wb-item-head,
#pedro-ai-app .tq-wb-v2 .tq-card-note .tq-wb-item-body,
#pedro-ai-app .tq-wb-v2 .tq-native-note-card .tq-wb-item-body,
#pedro-ai-app .tq-wb-v2 .tq-native-note,
#pedro-ai-app .tq-wb-v2 .tq-native-note-editor,
#pedro-ai-app.pedro-whiteboard-mode .tq-card-note .tq-wb-item-head,
#pedro-ai-app.pedro-whiteboard-mode .tq-native-note-card .tq-wb-item-head,
#pedro-ai-app.pedro-whiteboard-mode .tq-card-note .tq-wb-item-body,
#pedro-ai-app.pedro-whiteboard-mode .tq-native-note-card .tq-wb-item-body,
#pedro-ai-app.pedro-whiteboard-mode .tq-native-note,
#pedro-ai-app.pedro-whiteboard-mode .tq-native-note-editor {
  background: var(--tq-note-bg) !important;
  background-image: none !important;
}

#pedro-ai-app .tq-wb-v2 .tq-card-note .tq-wb-item-head,
#pedro-ai-app .tq-wb-v2 .tq-native-note-card .tq-wb-item-head {
  border-bottom-color: rgba(146,64,14,.16) !important;
}

#pedro-ai-app .tq-wb-v2 .tq-native-note,
#pedro-ai-app .tq-wb-v2 .tq-native-note-editor {
  border: 0 !important;
  box-shadow: none !important;
}

#pedro-ai-app .tq-wb-v2 .tq-native-note-editor {
  min-height: 116px !important;
  padding: 16px !important;
  color: #78350F !important;
}

#pedro-ai-app .tq-wb-v2 .tq-native-note-row,
#pedro-ai-app .tq-wb-v2 .tq-card-note .tq-wb-item-duplicate,
#pedro-ai-app .tq-wb-v2 .tq-native-note-card .tq-wb-item-duplicate {
  display: none !important;
}

#pedro-ai-app .tq-wb-v2 .tq-card-timer,
#pedro-ai-app .tq-wb-v2 .tq-native-timer-card,
#pedro-ai-app.pedro-whiteboard-mode .tq-card-timer,
#pedro-ai-app.pedro-whiteboard-mode .tq-native-timer-card,
#pedro-ai-app.pedro-whiteboard-mode .tq-card-timer .tq-wb-item-body,
#pedro-ai-app.pedro-whiteboard-mode .tq-native-timer-card .tq-wb-item-body,
#pedro-ai-app.pedro-whiteboard-mode .tq-native-timer {
  --tq-card-accent: #F59E0B;
  --tq-card-tint: #FFF4DE;
  background: #FFF7E7 !important;
  background-image: none !important;
  color: #23214A !important;
  border-color: #F6C344 !important;
}

#pedro-ai-app .tq-wb-v2 .tq-card-timer .tq-wb-item-head,
#pedro-ai-app .tq-wb-v2 .tq-native-timer-card .tq-wb-item-head,
#pedro-ai-app.pedro-whiteboard-mode .tq-card-timer .tq-wb-item-head,
#pedro-ai-app.pedro-whiteboard-mode .tq-native-timer-card .tq-wb-item-head {
  background: #FFF7E7 !important;
  background-image: none !important;
  color: #23214A !important;
  border-bottom-color: rgba(146,64,14,.14) !important;
}

#pedro-ai-app .tq-wb-v2 .tq-card-timer .tq-wb-item-title,
#pedro-ai-app .tq-wb-v2 .tq-native-timer-card .tq-wb-item-title,
#pedro-ai-app.pedro-whiteboard-mode .tq-card-timer .tq-wb-item-title,
#pedro-ai-app.pedro-whiteboard-mode .tq-native-timer-card .tq-wb-item-title {
  color: #78350F !important;
}

#pedro-ai-app .tq-wb-v2 .tq-native-timer {
  padding: 18px !important;
  border: 1px solid rgba(246,195,68,.32) !important;
  border-radius: 20px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92) !important;
}

#pedro-ai-app .tq-wb-v2 .tq-native-timer .tq-timer-clock,
#pedro-ai-app.pedro-whiteboard-mode .tq-native-timer .tq-timer-clock {
  color: #92400E !important;
  text-shadow: none !important;
}

#pedro-ai-app .tq-wb-v2 .tq-native-timer .tq-timer-bar,
#pedro-ai-app.pedro-whiteboard-mode .tq-native-timer .tq-timer-bar {
  background: #FFE8B5 !important;
}

#pedro-ai-app .tq-wb-v2 .tq-native-timer .tq-timer-bar span,
#pedro-ai-app.pedro-whiteboard-mode .tq-native-timer .tq-timer-bar span {
  background: linear-gradient(90deg, #F6C344, #F59E0B) !important;
}

#pedro-ai-app .tq-wb-v2 .tq-native-timer .tq-timer-actions button,
#pedro-ai-app.pedro-whiteboard-mode .tq-native-timer .tq-timer-actions button {
  background: #fff !important;
  color: #78350F !important;
  border-color: rgba(146,64,14,.18) !important;
}

#pedro-ai-app .tq-wb-v2 .tq-native-timer .tq-timer-actions button:hover,
#pedro-ai-app.pedro-whiteboard-mode .tq-native-timer .tq-timer-actions button:hover {
  background: #F59E0B !important;
  border-color: #F59E0B !important;
  color: #fff !important;
}

#pedro-ai-app .tq-wb-v2 .tq-card-timer.is-done,
#pedro-ai-app.pedro-whiteboard-mode .tq-card-timer.is-done {
  background: #FFF1F2 !important;
  border-color: #FDA4AF !important;
}

#pedro-ai-app .tq-wb-v2 .tq-card-timer.is-done .tq-native-timer,
#pedro-ai-app.pedro-whiteboard-mode .tq-card-timer.is-done .tq-native-timer {
  background: #FFF1F2 !important;
  border-color: #FDA4AF !important;
}

#pedro-ai-app .tq-wb-v2 .tq-card-timer.is-done .tq-timer-clock,
#pedro-ai-app.pedro-whiteboard-mode .tq-card-timer.is-done .tq-timer-clock {
  color: #BE123C !important;
  text-shadow: none !important;
}

#pedro-ai-app .tq-wb-v3-stamps[open] .tq-whiteboard-quickbar {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 14px !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(246,195,68,.18), transparent 38%),
    linear-gradient(180deg, #FFFFFF, #FFF8DB) !important;
}

#pedro-ai-app .tq-wb-v3-stamps[open] .tq-wb-stamp {
  width: 100% !important;
  height: 58px !important;
  min-height: 58px !important;
  border-radius: 20px !important;
  font-size: 28px !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-item-stamp {
  width: 132px !important;
  min-width: 132px !important;
  max-width: 132px !important;
  min-height: 132px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 2px solid rgba(246,195,68,.42) !important;
  border-radius: 34px !important;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.96), transparent 34%),
    linear-gradient(145deg, #FFFFFF, #FFF1B8) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 22px 48px rgba(146,64,14,.16) !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-item-stamp .tq-wb-item-head {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  min-height: 132px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-item-stamp .tq-wb-item-title {
  font-size: 74px !important;
  line-height: 1 !important;
  margin: 0 !important;
  text-align: center !important;
  overflow: visible !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-item-stamp .tq-wb-item-body,
#pedro-ai-app .tq-wb-v2 .tq-wb-item-stamp .tq-wb-item-paint,
#pedro-ai-app .tq-wb-v2 .tq-wb-item-stamp .tq-wb-item-lock,
#pedro-ai-app .tq-wb-v2 .tq-wb-item-stamp .tq-wb-item-duplicate,
#pedro-ai-app .tq-wb-v2 .tq-wb-item-stamp .tq-wb-item-speak {
  display: none !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-item-stamp .tq-wb-item-close {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  opacity: 0 !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-item-stamp:hover .tq-wb-item-close,
#pedro-ai-app .tq-wb-v2 .tq-wb-item-stamp.is-selected .tq-wb-item-close {
  opacity: 1 !important;
}

@media (max-width: 920px) {
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-rail,
  #pedro-ai-app .tq-wb-v3-rail {
    padding: 8px !important;
    border-radius: 22px !important;
  }

  #pedro-ai-app .tq-wb-v3-rail-card {
    padding: 8px !important;
    border-radius: 17px !important;
  }

  #pedro-ai-app .tq-wb-v3-tools {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  #pedro-ai-app .tq-wb-v3-tools .tq-wb-tool {
    height: 39px !important;
    min-height: 39px !important;
    border-radius: 12px !important;
  }

  #pedro-ai-app .tq-wb-v3-tools .tq-wb-tool-icon {
    width: 19px !important;
    height: 19px !important;
  }
}

@media (max-width: 640px) {
  #pedro-ai-app .tq-wb-v3-stamps[open] .tq-whiteboard-quickbar {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  #pedro-ai-app .tq-wb-v3-stamps[open] .tq-wb-stamp {
    height: 50px !important;
    min-height: 50px !important;
    font-size: 24px !important;
  }
}

/* v6.55.35 - Impeccable left rail + true yellow note + transparent stamps */
@media (min-width: 921px) {
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-workspace,
  #pedro-ai-app .tq-wb-v3-workspace {
    grid-template-columns: 144px minmax(0, 1fr) minmax(310px, 380px) !important;
  }
}

#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-rail,
#pedro-ai-app .tq-wb-v3-rail {
  gap: 0 !important;
  padding: 8px !important;
  border: 1px solid rgba(108,92,231,.14) !important;
  border-radius: 24px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,249,255,.94)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 16px 42px rgba(84,76,190,.12) !important;
  backdrop-filter: blur(14px) saturate(1.05) !important;
  overflow: hidden !important;
}

#pedro-ai-app .tq-wb-v3-rail-card {
  width: 100% !important;
  margin: 0 !important;
  padding: 10px 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#pedro-ai-app .tq-wb-v3-rail-card:not(:last-child) {
  border-bottom: 1px solid rgba(108,92,231,.12) !important;
}

#pedro-ai-app .tq-wb-v3-tool-card {
  padding-top: 8px !important;
}

#pedro-ai-app .tq-wb-v3-rail-label,
#pedro-ai-app .tq-wb-v3-settings-card .tq-wb-field-label,
#pedro-ai-app .tq-wb-v3-settings-card .tq-wb-field-head > span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 0 8px !important;
  color: #514B7B !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .035em !important;
  line-height: 1 !important;
  text-transform: none !important;
}

#pedro-ai-app .tq-wb-v3-rail-label::before {
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: #6C5CE7 !important;
  box-shadow: 0 0 0 3px rgba(108,92,231,.13) !important;
}

#pedro-ai-app .tq-wb-v3-color-card .tq-wb-v3-rail-label::before {
  background: #F6C344 !important;
  box-shadow: 0 0 0 3px rgba(246,195,68,.18) !important;
}

#pedro-ai-app .tq-wb-v3-settings-card .tq-wb-field-label::before,
#pedro-ai-app .tq-wb-v3-settings-card .tq-wb-field-head > span::before {
  display: none !important;
}

#pedro-ai-app .tq-wb-v3-tools {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
  width: 100% !important;
  padding: 0 !important;
}

#pedro-ai-app .tq-wb-v3-tools .tq-wb-tool {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 !important;
  border: 1px solid rgba(108,92,231,.16) !important;
  border-radius: 15px !important;
  background: #FFFFFF !important;
  color: #5B4ACF !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 7px 15px rgba(84,76,190,.08) !important;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease, color .14s ease !important;
}

#pedro-ai-app .tq-wb-v3-tools .tq-wb-tool::after {
  display: none !important;
}

#pedro-ai-app .tq-wb-v3-tools .tq-wb-tool:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(108,92,231,.32) !important;
  background: #F6F4FF !important;
  color: #4B3AB4 !important;
  box-shadow: 0 11px 22px rgba(84,76,190,.14) !important;
}

#pedro-ai-app .tq-wb-v3-tools .tq-wb-tool.active,
#pedro-ai-app .tq-wb-v3-tools .tq-wb-tool.active:hover {
  border-color: #6C5CE7 !important;
  background: linear-gradient(135deg, #6C5CE7, #5546D6) !important; /* #7B6CF0 dejaba el texto blanco en 4.00:1 */
  color: #fff !important;
  box-shadow: 0 12px 24px rgba(84,76,190,.24) !important;
}

#pedro-ai-app .tq-wb-v3-tools .tq-wb-tool-icon {
  width: 21px !important;
  height: 21px !important;
  stroke-width: 2.2px !important;
}

#pedro-ai-app .tq-wb-v3-color-head {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-width: 0 !important;
}

#pedro-ai-app .tq-wb-v3-color-name {
  display: none !important;
}

#pedro-ai-app .tq-wb-v3-palette-frame {
  width: 100% !important;
  padding: 8px !important;
  border: 1px solid rgba(246,195,68,.22) !important;
  border-radius: 17px !important;
  background: rgba(255,248,219,.42) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92) !important;
  overflow: visible !important;
}

#pedro-ai-app .tq-wb-v3-palette-frame .tq-wb-v3-colors {
  display: grid !important;
  grid-template-columns: repeat(2, 38px) !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 9px 12px !important;
  width: 100% !important;
  overflow: visible !important;
}

#pedro-ai-app .tq-wb-v3-colors .tq-wb-color {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border: 3px solid #fff !important;
  border-radius: 999px !important;
  outline: 0 !important;
  box-shadow:
    0 0 0 1px rgba(35,33,74,.16),
    0 8px 14px rgba(35,33,74,.12) !important;
  transform: none !important;
}

#pedro-ai-app .tq-wb-v3-colors .tq-wb-color:hover {
  transform: translateY(-1px) !important;
  box-shadow:
    0 0 0 1px rgba(35,33,74,.16),
    0 10px 18px rgba(35,33,74,.16) !important;
}

#pedro-ai-app .tq-wb-v3-colors .tq-wb-color.active {
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 6px #6C5CE7,
    0 10px 20px rgba(84,76,190,.20) !important;
}

#pedro-ai-app .tq-wb-v3-settings-card {
  display: grid !important;
  gap: 10px !important;
}

#pedro-ai-app .tq-wb-v3-settings-card .tq-wb-size,
#pedro-ai-app .tq-wb-v3-settings-card .tq-wb-bg-field {
  display: grid !important;
  gap: 7px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#pedro-ai-app .tq-wb-v3-settings-card .tq-wb-field-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

#pedro-ai-app .tq-wb-v3-settings-card .tq-wb-field-head > span {
  margin: 0 !important;
}

#pedro-ai-app .tq-wb-v3-settings-card #tq-wb-size-value {
  color: #23214A !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

#pedro-ai-app .tq-wb-v3-settings-card #tq-wb-size {
  width: 100% !important;
  height: 20px !important;
  accent-color: #6C5CE7 !important;
}

#pedro-ai-app .tq-wb-v3-settings-card #tq-wb-size::-webkit-slider-runnable-track {
  height: 6px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #6C5CE7, #A99CFF) !important;
}

#pedro-ai-app .tq-wb-v3-settings-card #tq-wb-size::-webkit-slider-thumb {
  width: 18px !important;
  height: 18px !important;
  margin-top: -6px !important;
  border: 3px solid #fff !important;
  border-radius: 999px !important;
  background: #23214A !important;
  box-shadow: 0 4px 10px rgba(35,33,74,.18) !important;
}

#pedro-ai-app .tq-wb-v3-settings-card #tq-wb-size::-moz-range-track {
  height: 6px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #6C5CE7, #A99CFF) !important;
}

#pedro-ai-app .tq-wb-v3-settings-card #tq-wb-size::-moz-range-thumb {
  width: 18px !important;
  height: 18px !important;
  border: 3px solid #fff !important;
  border-radius: 999px !important;
  background: #23214A !important;
  box-shadow: 0 4px 10px rgba(35,33,74,.18) !important;
}

#pedro-ai-app .tq-wb-v3-settings-card .tq-wb-bg {
  width: 100% !important;
  min-width: 0 !important;
  height: 40px !important;
  padding: 0 30px 0 12px !important;
  border: 1px solid rgba(108,92,231,.16) !important;
  border-radius: 14px !important;
  background-color: #fff !important;
  color: #23214A !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  box-shadow: 0 7px 14px rgba(84,76,190,.08) !important;
}

#pedro-ai-app .tq-wb-v3-zoom-card {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) 34px !important;
  gap: 6px !important;
  align-items: center !important;
}

#pedro-ai-app .tq-wb-v3-zoom-card .pedro-btn-secondary {
  width: 100% !important;
  min-width: 0 !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  border: 1px solid rgba(108,92,231,.16) !important;
  border-radius: 13px !important;
  background: #fff !important;
  color: #5546D6 !important;
  box-shadow: 0 7px 14px rgba(84,76,190,.08) !important;
}

#pedro-ai-app .tq-wb-v3-zoom-card .pedro-btn-secondary:hover {
  background: #6C5CE7 !important;
  border-color: #6C5CE7 !important;
  color: #fff !important;
}

#pedro-ai-app .tq-wb-v3-zoom-card .tq-wb-zoom-reset {
  font-size: 11px !important;
  font-weight: 950 !important;
}

#pedro-ai-app .tq-wb-v2 .tq-card-note.tq-native-note-card,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2 .tq-card-note.tq-native-note-card {
  --tq-card-accent: #F6C344;
  --tq-card-tint: #FEF3C7;
  --tq-note-bg: #FEF3C7;
  background: var(--tq-note-bg) !important;
  background-image: none !important;
  border-color: #F6C344 !important;
}

#pedro-ai-app .tq-wb-v2 .tq-card-note.tq-native-note-card .tq-wb-item-head,
#pedro-ai-app .tq-wb-v2 .tq-card-note.tq-native-note-card .tq-wb-item-body,
#pedro-ai-app .tq-wb-v2 .tq-card-note.tq-native-note-card .tq-native-note,
#pedro-ai-app .tq-wb-v2 .tq-card-note.tq-native-note-card .tq-native-note-editor,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2 .tq-card-note.tq-native-note-card .tq-wb-item-head,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2 .tq-card-note.tq-native-note-card .tq-wb-item-body,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2 .tq-card-note.tq-native-note-card .tq-native-note,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2 .tq-card-note.tq-native-note-card .tq-native-note-editor {
  background: var(--tq-note-bg) !important;
  background-image: none !important;
}

#pedro-ai-app .tq-wb-v2 .tq-card-note.tq-native-note-card .tq-wb-item-body,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2 .tq-card-note.tq-native-note-card .tq-wb-item-body {
  padding: 0 !important;
}

#pedro-ai-app .tq-wb-v2 .tq-card-note.tq-native-note-card .tq-native-note,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2 .tq-card-note.tq-native-note-card .tq-native-note {
  min-height: 100% !important;
  padding: 20px 22px 28px !important;
}

#pedro-ai-app .tq-wb-v2 .tq-card-note.tq-native-note-card .tq-native-note-editor,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2 .tq-card-note.tq-native-note-card .tq-native-note-editor {
  min-height: 150px !important;
  padding: 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #78350F !important;
  box-shadow: none !important;
}

#pedro-ai-app .tq-wb-v2 .tq-card-note.tq-native-note-card .tq-native-note-editor:focus,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2 .tq-card-note.tq-native-note-card .tq-native-note-editor:focus {
  border-radius: 12px !important;
  box-shadow: inset 0 0 0 2px rgba(146,64,14,.16) !important;
}

#pedro-ai-app .tq-wb-v2 .tq-card-note.tq-native-note-card .tq-wb-item-duplicate,
#pedro-ai-app .tq-wb-v2 .tq-card-note.tq-native-note-card .tq-native-note-row {
  display: none !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-item-stamp,
#pedro-ai-app .tq-wb-v2 .tq-wb-item-stamp.is-selected,
#pedro-ai-app .tq-wb-v2 .tq-wb-item-stamp:hover {
  width: 112px !important;
  min-width: 112px !important;
  max-width: 112px !important;
  min-height: 112px !important;
  padding: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-item-stamp.is-selected {
  outline: 3px solid rgba(108,92,231,.24) !important;
  outline-offset: 6px !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-item-stamp .tq-wb-item-head {
  min-height: 112px !important;
  border: 0 !important;
  background: transparent !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-item-stamp .tq-wb-item-title {
  font-size: 78px !important;
  filter: drop-shadow(0 10px 14px rgba(146,64,14,.18)) !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-item-stamp .tq-wb-item-close {
  top: -10px !important;
  right: -10px !important;
  background: #fff !important;
  border-color: rgba(108,92,231,.18) !important;
  opacity: 0 !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-item-stamp:hover .tq-wb-item-close,
#pedro-ai-app .tq-wb-v2 .tq-wb-item-stamp.is-selected .tq-wb-item-close {
  opacity: 1 !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-item-stamp .tq-wb-item-resizer {
  display: none !important;
}

@media (max-width: 920px) {
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-rail,
  #pedro-ai-app .tq-wb-v3-rail {
    gap: 7px !important;
    padding: 7px !important;
    overflow: visible !important;
  }

  #pedro-ai-app .tq-wb-v3-rail-card {
    border: 1px solid rgba(108,92,231,.12) !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.92) !important;
  }

  #pedro-ai-app .tq-wb-v3-rail-card:not(:last-child) {
    border-bottom: 1px solid rgba(108,92,231,.12) !important;
  }

  #pedro-ai-app .tq-wb-v3-tools {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  }
}

/* v6.55.36 - Left rail compact fit so zoom always remains reachable */
@media (min-width: 921px) {
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-workspace,
  #pedro-ai-app .tq-wb-v3-workspace {
    grid-template-columns: 136px minmax(0, 1fr) minmax(310px, 380px) !important;
  }

  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-rail,
  #pedro-ai-app .tq-wb-v3-rail {
    padding: 6px !important;
    border-radius: 22px !important;
    max-height: calc(100vh - 146px) !important;
    overflow-y: auto !important;
    overflow-x: visible !important;
    scrollbar-width: none !important;
  }

  #pedro-ai-app .tq-wb-v3-rail::-webkit-scrollbar {
    display: none !important;
  }

  #pedro-ai-app .tq-wb-v3-rail-card {
    padding: 8px 7px !important;
  }

  #pedro-ai-app .tq-wb-v3-rail-label,
  #pedro-ai-app .tq-wb-v3-settings-card .tq-wb-field-label,
  #pedro-ai-app .tq-wb-v3-settings-card .tq-wb-field-head > span {
    margin: 0 0 6px !important;
    font-size: 10px !important;
    letter-spacing: .025em !important;
  }

  #pedro-ai-app .tq-wb-v3-rail-label::before {
    width: 7px !important;
    height: 7px !important;
    box-shadow: 0 0 0 3px rgba(108,92,231,.12) !important;
  }

  #pedro-ai-app .tq-wb-v3-tools {
    gap: 5px !important;
  }

  #pedro-ai-app .tq-wb-v3-tools .tq-wb-tool {
    height: 37px !important;
    min-height: 37px !important;
    border-radius: 13px !important;
  }

  #pedro-ai-app .tq-wb-v3-tools .tq-wb-tool-icon {
    width: 18px !important;
    height: 18px !important;
  }

  #pedro-ai-app .tq-wb-v3-palette-frame {
    padding: 6px !important;
    border-radius: 15px !important;
  }

  #pedro-ai-app .tq-wb-v3-palette-frame .tq-wb-v3-colors {
    grid-template-columns: repeat(3, 29px) !important;
    gap: 7px !important;
  }

  #pedro-ai-app .tq-wb-v3-colors .tq-wb-color {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    border-width: 2px !important;
  }

  #pedro-ai-app .tq-wb-v3-colors .tq-wb-color.active {
    box-shadow:
      0 0 0 2px #fff,
      0 0 0 4px #6C5CE7,
      0 8px 16px rgba(84,76,190,.18) !important;
  }

  #pedro-ai-app .tq-wb-v3-settings-card {
    gap: 7px !important;
  }

  #pedro-ai-app .tq-wb-v3-settings-card .tq-wb-size,
  #pedro-ai-app .tq-wb-v3-settings-card .tq-wb-bg-field {
    gap: 4px !important;
  }

  #pedro-ai-app .tq-wb-v3-settings-card #tq-wb-size-value {
    font-size: 11px !important;
  }

  #pedro-ai-app .tq-wb-v3-settings-card #tq-wb-size {
    height: 16px !important;
  }

  #pedro-ai-app .tq-wb-v3-settings-card #tq-wb-size::-webkit-slider-runnable-track {
    height: 5px !important;
  }

  #pedro-ai-app .tq-wb-v3-settings-card #tq-wb-size::-webkit-slider-thumb {
    width: 16px !important;
    height: 16px !important;
    margin-top: -5.5px !important;
  }

  #pedro-ai-app .tq-wb-v3-settings-card #tq-wb-size::-moz-range-track {
    height: 5px !important;
  }

  #pedro-ai-app .tq-wb-v3-settings-card #tq-wb-size::-moz-range-thumb {
    width: 16px !important;
    height: 16px !important;
  }

  #pedro-ai-app .tq-wb-v3-settings-card .tq-wb-bg {
    height: 32px !important;
    padding: 0 26px 0 10px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
  }

  #pedro-ai-app .tq-wb-v3-zoom-card {
    grid-template-columns: 30px minmax(0, 1fr) 30px !important;
    gap: 5px !important;
  }

  #pedro-ai-app .tq-wb-v3-zoom-card .pedro-btn-secondary {
    height: 31px !important;
    min-height: 31px !important;
    border-radius: 11px !important;
    font-size: 12px !important;
  }

  #pedro-ai-app .tq-wb-v3-zoom-card .tq-wb-zoom-reset {
    font-size: 10px !important;
  }
}

@media (min-width: 921px) and (max-height: 760px) {
  #pedro-ai-app .tq-wb-v3-rail-card {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  #pedro-ai-app .tq-wb-v3-rail-label,
  #pedro-ai-app .tq-wb-v3-settings-card .tq-wb-field-label,
  #pedro-ai-app .tq-wb-v3-settings-card .tq-wb-field-head > span {
    margin-bottom: 4px !important;
    font-size: 9.5px !important;
  }

  #pedro-ai-app .tq-wb-v3-tools .tq-wb-tool {
    height: 34px !important;
    min-height: 34px !important;
  }

  #pedro-ai-app .tq-wb-v3-tools .tq-wb-tool-icon {
    width: 17px !important;
    height: 17px !important;
  }

  #pedro-ai-app .tq-wb-v3-palette-frame {
    padding: 5px !important;
  }

  #pedro-ai-app .tq-wb-v3-colors .tq-wb-color {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
  }

  #pedro-ai-app .tq-wb-v3-settings-card .tq-wb-bg,
  #pedro-ai-app .tq-wb-v3-zoom-card .pedro-btn-secondary {
    height: 29px !important;
    min-height: 29px !important;
  }
}

/* ════════════════════════════════════════════════════════════
   v6.58.0 — PICTURE DICTIONARY · Tarjeta del profesor en la pizarra
   ════════════════════════════════════════════════════════════ */
.tq-pict-card{display:grid;gap:9px;}
.tq-pict-card p{margin:0;color:var(--text-3);font-size:12px;font-weight:800;line-height:1.35;}
.tq-pict-card .tq-collab-actions{grid-template-columns:1fr 1fr;}
/* v6.99.0 — El vocabulario se pega una vez al principio, y a partir de
   ahí el profesor solo pulsa «siguiente ronda»: quién dibuja y qué
   dibuja lo reparte el servidor. */
.tq-pict-setup{display:grid;gap:7px;padding:11px;border:1px dashed rgba(108,92,231,.30);border-radius:14px;background:rgba(108,92,231,.04);}
.tq-pict-setup label{font-size:10px;font-weight:950;text-transform:uppercase;letter-spacing:.08em;color:#4C3EC8;}
.tq-pict-words{border:1px solid var(--border);border-radius:12px;padding:9px 11px;font:800 13px/1.4 inherit;background:#fff;resize:vertical;min-height:74px;}
.tq-pict-words:focus{outline:none;border-color:#6C5CE7;box-shadow:0 0 0 3px rgba(108,92,231,.14);}
.tq-pict-secs-row{display:grid;grid-template-columns:minmax(0,1fr) 92px;gap:8px;align-items:center;}
.tq-pict-secs{border:1px solid var(--border);border-radius:12px;padding:8px 10px;font-size:12.5px;font-weight:900;background:#fff;min-height:40px;}

/* La ronda en directo: quién dibuja, cuánto queda y qué va escribiendo la
   clase. Es la pantalla que el profesor proyecta. */
.tq-pict-live{display:grid;gap:8px;padding:10px 11px;border:1px solid #E8EAEF;border-radius:14px;background:#fff;}
.tq-pict-live-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.tq-pict-phase-label{font-size:12.5px;font-weight:900;color:#111318;}
.tq-pict-phase-label b{color:#5546D6;}
.tq-pict-timer{font-size:11px;font-weight:950;color:#C2410C;background:#FFF7ED;border:1px solid #FED7AA;border-radius:999px;padding:4px 10px;white-space:nowrap;}
.tq-pict-canvas{border:1px solid #E8EAEF;border-radius:12px;overflow:hidden;background:#fff;min-height:150px;display:grid;place-items:center;}
.tq-pict-canvas img{display:block;width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff;}
.tq-pict-empty{color:var(--text-3);font-size:12px;font-weight:800;padding:26px 12px;text-align:center;}
.tq-pict-tries{display:grid;gap:4px;}
.tq-pict-try{display:grid;grid-template-columns:minmax(0,88px) minmax(0,1fr) auto;gap:8px;align-items:center;font-size:11.5px;font-weight:850;color:var(--text-3);border:1px solid #EEF0F4;border-radius:10px;padding:5px 9px;animation:tqPictIn .25s ease;}
.tq-pict-try span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tq-pict-try b{color:#111318;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tq-pict-try i{font-style:normal;color:var(--text-4);font-size:10.5px;}
.tq-pict-try.is-ok{border-color:#6EE7B7;background:#ECFDF5;color:#047857;}
.tq-pict-try.is-ok b{color:#047857;}

/* Los botones de la tarjeta. v6.99.0 — Los de la votación ya no existen;
   ahora son empezar la ronda, guardar el vocabulario y cortar. */
#pedro-ai-app .tq-wb-item button.tq-pict-start,
#pedro-ai-app .tq-wb-item button.tq-pict-save-words,
#pedro-ai-app .tq-wb-item button.tq-pict-cut,
.tq-pict-start,.tq-pict-save-words,.tq-pict-cut{
  border:0 !important;border-radius:12px !important;
  /* #7B6CF0 deja el texto blanco en 4.00:1; con #6C5CE7 sube a 4.86:1. */
  background:linear-gradient(135deg,#6C5CE7,#5546D6) !important;
  color:#fff !important;
  font-size:12.5px;font-weight:950;padding:10px;cursor:pointer;
  min-height:44px;
  box-shadow:0 10px 22px rgba(108,92,231,.24);
}
#pedro-ai-app .tq-wb-item button.tq-pict-start:hover,
#pedro-ai-app .tq-wb-item button.tq-pict-save-words:hover,
#pedro-ai-app .tq-wb-item button.tq-pict-cut:hover{
  background:linear-gradient(135deg,#8A7BF5,#6152E0) !important;
  color:#fff !important;
}
/* Cortar la ronda es la salida de emergencia, no la acción principal. */
#pedro-ai-app .tq-wb-item button.tq-pict-cut,
.tq-pict-cut{
  background:var(--text) !important;box-shadow:none !important;font-size:11.5px;
}
#pedro-ai-app .tq-wb-item button.tq-pict-cut:hover{ background:var(--text) !important; }

.tq-pict-winner{display:grid;gap:3px;border:2px solid #FCD34D;border-radius:16px;background:linear-gradient(180deg,#FFFBEB,#fff);padding:12px;text-align:center;}
.tq-pict-winner strong{font-size:15px;display:block;}
.tq-pict-winner span{font-size:11.5px;color:var(--text-3);font-weight:800;}
.tq-pict-winner b{color:#5546D6;}
.tq-pict-scores{display:grid;gap:5px;padding:10px 11px;border:1px solid #E8EAEF;border-radius:14px;background:#fff;}
.tq-pict-scores>b{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:#4C3EC8;}
.tq-pict-score-row{display:flex;justify-content:space-between;font-size:12px;font-weight:900;}
.tq-pict-score-row b{color:#5546D6;}
.tq-wb-v2 .tq-wb-dock-grid .tq-add-pict{background:linear-gradient(135deg,#fff,#F1EFFD)!important;border-color:#D5CEF8!important;}


/* v6.58.1 — Blindaje de contraste: los botones de acción de las tarjetas
   collab y pict conservan su color sobre la regla genérica de tinta oscura
   de `.tq-wb-item button` y su hover claro. */
#pedro-ai-app .tq-wb-item .tq-collab-actions button{
  background:#6C5CE7 !important;
  color:#fff !important;
  border:0 !important;
}
#pedro-ai-app .tq-wb-item .tq-collab-actions button:hover{
  background:#5546D6 !important;
  color:#fff !important;
}
#pedro-ai-app .tq-wb-item .tq-collab-actions button:last-child{
  background:var(--text) !important;
}
#pedro-ai-app .tq-wb-item .tq-collab-actions button:last-child:hover{
  background:var(--text) !important;
}

/* v6.58.2 — Tarjeta EN VIVO de Picture Dictionary en la sección Juegos */
#pedro-ai-app .tq-game-live-banner{
  display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:14px;
  width:100%;text-align:left;padding:16px 18px;cursor:pointer;
  border:1.5px solid rgba(108,92,231,.35) !important;border-radius:20px !important;
  background:linear-gradient(120deg,#171233 0%,#3B2FA3 70%,#5546D6 100%) !important;
  box-shadow:0 16px 40px rgba(59,47,163,.30) !important;
  transition:transform .16s ease, box-shadow .16s ease;
}
#pedro-ai-app .tq-game-live-banner:hover{transform:translateY(-2px);box-shadow:0 22px 52px rgba(59,47,163,.40) !important;}
#pedro-ai-app .tq-game-live-emoji{width:56px;height:56px;border-radius:16px;background:rgba(255,255,255,.12);display:grid;place-items:center;font-size:28px;}
#pedro-ai-app .tq-game-live-copy{display:grid;gap:3px;min-width:0;}
#pedro-ai-app .tq-game-live-banner strong{color:#fff !important;font-size:15.5px;font-weight:900;display:flex;align-items:center;gap:8px;}
#pedro-ai-app .tq-game-live-banner small{color:rgba(255,255,255,.72) !important;font-size:12px;font-weight:700;line-height:1.4;}
#pedro-ai-app .tq-game-live-pill{
  font-style:normal;font-size:9.5px;font-weight:950;letter-spacing:.08em;
  background:#22C55E;color:#052e16;border-radius:999px;padding:3px 8px;
  animation:tqLivePulse 1.6s ease infinite;
}
@keyframes tqLivePulse{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.55);}50%{box-shadow:0 0 0 7px rgba(34,197,94,0);}}
#pedro-ai-app .tq-game-live-cta{
  white-space:nowrap;background:#fff;color:#4C3EC8 !important;font-size:12.5px;font-weight:950;
  border-radius:999px;padding:9px 15px;box-shadow:0 8px 20px rgba(0,0,0,.22);
}
@media (max-width:640px){
  #pedro-ai-app .tq-game-live-banner{grid-template-columns:46px minmax(0,1fr);}
  #pedro-ai-app .tq-game-live-cta{grid-column:1 / -1;justify-self:start;}
}
/* Flash al volver a una partida ya abierta */
.tq-wb-item.tq-pict-flash{animation:tqPictFlash 1.5s ease;}
@keyframes tqPictFlash{0%,100%{box-shadow:none;}30%{box-shadow:0 0 0 5px rgba(108,92,231,.55),0 20px 60px rgba(108,92,231,.35);}}

/* ══════════════════════════════════════════════════════════════════════
   v6.59.2 — CONTRASTE DE LOS CONTROLES DEL JUEGO DE OPCIONES
   Problema: `#pedro-ai-app .tq-wb-v3 .tq-wb-item button { color:var(--text) }`
   (1 id + 3 clases) gana por especificidad al `color:#fff` de
   `.tq-wb-v2 .tq-choice-actions button`, que tiene fondo var(--text).
   Resultado: seis botones negros con texto negro — no se veía dónde se
   estaba pulsando.
   Solución: controles claros, legibles y con jerarquía (equipos, apoyo,
   acción principal) y un estado :active bien visible al tocar.
   ══════════════════════════════════════════════════════════════════════ */
#pedro-ai-app .tq-wb-item .tq-choice-actions button,
#pedro-ai-app .tq-wb-v3 .tq-wb-item .tq-choice-actions button {
  background: #FFFFFF !important;
  color: var(--text) !important;
  border: 1px solid rgba(15,23,42,.14) !important;
  border-radius: 12px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  padding: 9px 8px !important;
  box-shadow: 0 2px 6px rgba(15,23,42,.06) !important;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease !important;
}

/* Marcador de equipos: color propio para distinguirlos de un vistazo. */
#pedro-ai-app .tq-wb-item .tq-choice-actions .tq-choice-team[data-team="A"],
#pedro-ai-app .tq-wb-v3 .tq-wb-item .tq-choice-actions .tq-choice-team[data-team="A"] {
  background: #EFF6FF !important; color: #1D4ED8 !important; border-color: rgba(29,78,216,.28) !important;
}
#pedro-ai-app .tq-wb-item .tq-choice-actions .tq-choice-team[data-team="B"],
#pedro-ai-app .tq-wb-v3 .tq-wb-item .tq-choice-actions .tq-choice-team[data-team="B"] {
  background: #FFF1F2 !important; color: #BE123C !important; border-color: rgba(190,18,60,.26) !important;
}

/* Ayudas del profesor: ámbar suave. */
#pedro-ai-app .tq-wb-item .tq-choice-actions .tq-choice-random,
#pedro-ai-app .tq-wb-item .tq-choice-actions .tq-choice-reveal,
#pedro-ai-app .tq-wb-v3 .tq-wb-item .tq-choice-actions .tq-choice-random,
#pedro-ai-app .tq-wb-v3 .tq-wb-item .tq-choice-actions .tq-choice-reveal {
  background: #FFF7ED !important; color: #9A3412 !important; border-color: rgba(234,88,12,.26) !important;
}

/* Acción principal: la que más se usa en clase, sólida y con contraste alto. */
#pedro-ai-app .tq-wb-item .tq-choice-actions .tq-choice-next,
#pedro-ai-app .tq-wb-v3 .tq-wb-item .tq-choice-actions .tq-choice-next {
  background: #6C5CE7 !important; color: #FFFFFF !important; border-color: #5546D6 !important;
  box-shadow: 0 6px 16px rgba(108,92,231,.26) !important;
}

/* Feedback táctil: se ve qué botón se ha pulsado. */
#pedro-ai-app .tq-wb-item .tq-choice-actions button:hover,
#pedro-ai-app .tq-wb-v3 .tq-wb-item .tq-choice-actions button:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.12) !important;
}
#pedro-ai-app .tq-wb-item .tq-choice-actions button:active,
#pedro-ai-app .tq-wb-v3 .tq-wb-item .tq-choice-actions button:active {
  transform: scale(.96) !important;
  box-shadow: inset 0 2px 6px rgba(15,23,42,.18) !important;
}
#pedro-ai-app .tq-wb-item .tq-choice-actions button:disabled,
#pedro-ai-app .tq-wb-v3 .tq-wb-item .tq-choice-actions button:disabled {
  opacity: .45 !important; box-shadow: none !important; transform: none !important;
}

/* ══════════════════════════════════════════════════════════════════════
   v6.59.2 — MODO PRESENTACIÓN
   Flujo real de aula: el profesor deja la pizarra proyectada con los
   recursos del día mientras la clase va entrando. En ese momento la
   botonera sobra. Este modo deja solo el lienzo, a pantalla completa.
   ══════════════════════════════════════════════════════════════════════ */
#pedro-ai-app .pedro-whiteboard-panel-wrapper.tq-wb-presenting .tq-wb-command-bar,
#pedro-ai-app .pedro-whiteboard-panel-wrapper.tq-wb-presenting .tq-wb-v3-rail,
#pedro-ai-app .pedro-whiteboard-panel-wrapper.tq-wb-presenting .tq-wb-dock,
#pedro-ai-app .pedro-whiteboard-panel-wrapper.tq-wb-presenting .tq-whiteboard-intro {
  display: none !important;
}

#pedro-ai-app .pedro-whiteboard-panel-wrapper.tq-wb-presenting .tq-wb-workspace {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
}

#pedro-ai-app .pedro-whiteboard-panel-wrapper.tq-wb-presenting .tq-whiteboard-shell {
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

#pedro-ai-app .pedro-whiteboard-panel-wrapper.tq-wb-presenting .tq-whiteboard-stage {
  height: 100% !important;
  min-height: calc(100dvh - 24px) !important;
  border-radius: 18px !important;
}

/* Las tarjetas siguen siendo interactivas: el profe puede tocar un juego o
   girar una tarjeta durante la presentación sin salir del modo. Solo se
   ocultan los controles de edición de cada elemento. */
#pedro-ai-app .pedro-whiteboard-panel-wrapper.tq-wb-presenting .tq-wb-item-close,
#pedro-ai-app .pedro-whiteboard-panel-wrapper.tq-wb-presenting .tq-wb-item-duplicate,
#pedro-ai-app .pedro-whiteboard-panel-wrapper.tq-wb-presenting .tq-wb-item-paint,
#pedro-ai-app .pedro-whiteboard-panel-wrapper.tq-wb-presenting .tq-wb-item-lock,
#pedro-ai-app .pedro-whiteboard-panel-wrapper.tq-wb-presenting .tq-wb-item-resizer {
  display: none !important;
}

/* Botón flotante para volver: discreto pero siempre encontrable. */
#pedro-ai-app .tq-wb-present-exit {
  display: none;
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 2147483000;
  align-items: center;
  gap: 7px;
  padding: 11px 18px;
  border: 0;
  border-radius: 999px;
  background: rgba(17,24,39,.88);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(15,23,42,.32);
  backdrop-filter: blur(8px);
  transition: transform .14s ease, background .14s ease;
}
#pedro-ai-app .pedro-whiteboard-panel-wrapper.tq-wb-presenting .tq-wb-present-exit { display: inline-flex; }
#pedro-ai-app .tq-wb-present-exit:hover { background: var(--text); transform: translateY(-2px); }
#pedro-ai-app .tq-wb-present-exit:focus-visible { outline: 3px solid rgba(108,92,231,.6); outline-offset: 2px; }

/* Estado activo del botón de la barra. */
#pedro-ai-app .tq-wb-present-btn.is-active {
  background: var(--text) !important;
  color: #fff !important;
  border-color: var(--text) !important;
}
#pedro-ai-app .tq-wb-present-btn.is-active .tq-wb-action-icon,
#pedro-ai-app .tq-wb-present-btn.is-active .tq-wb-action-label { color: #fff !important; }

@media print { #pedro-ai-app .tq-wb-present-exit { display: none !important; } }

/* ══════════════════════════════════════════════════════════════════════
   v6.60.0 — FICHAS INTERACTIVAS · modal de QR y respuestas
   ══════════════════════════════════════════════════════════════════════ */
#pedro-ai-app .tq-ws-modal{
  position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;padding:18px;
  background:rgba(15,23,42,.55);backdrop-filter:blur(6px);
}
#pedro-ai-app .tq-ws-modal-card{
  position:relative;width:min(460px,100%);max-height:90vh;overflow:auto;
  background:#fff;border-radius:26px;padding:24px;text-align:center;
  box-shadow:0 30px 80px rgba(15,23,42,.32);
}
#pedro-ai-app .tq-ws-modal-close{
  position:absolute;top:12px;right:12px;width:34px;height:34px;border:0;border-radius:50%;
  background:var(--surface-2);color:#0f172a;font-size:19px;font-weight:900;cursor:pointer;line-height:1;
}
#pedro-ai-app .tq-ws-modal-close:hover{background:var(--border);}
#pedro-ai-app .tq-ws-modal-kicker{
  display:inline-flex;background:#F1EFFD;color:#4C3EC8;border:1px solid #D5CEF8;border-radius:999px;
  padding:6px 13px;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;
}
#pedro-ai-app .tq-ws-modal-title{font-size:21px;font-weight:900;margin:12px 0 5px;line-height:1.2;}
#pedro-ai-app .tq-ws-modal-sub{color:var(--text-3);font-size:13.5px;font-weight:700;margin:0 0 16px;line-height:1.5;}
#pedro-ai-app .tq-ws-qr{
  display:grid;place-items:center;padding:14px;border-radius:20px;background:#fff;
  border:2px solid var(--border);margin-bottom:14px;
}
#pedro-ai-app .tq-ws-qr img{display:block;width:240px;height:240px;image-rendering:pixelated;}
#pedro-ai-app .tq-ws-meta{display:flex;justify-content:center;gap:16px;margin-bottom:12px;}
#pedro-ai-app .tq-ws-meta span{font-size:12.5px;font-weight:800;color:var(--text-3);}
#pedro-ai-app .tq-ws-meta b{color:#5546D6;}
#pedro-ai-app .tq-ws-link{
  width:100%;border:1px solid var(--border);border-radius:14px;padding:11px 13px;
  font:700 13px Inter,system-ui,sans-serif;color:var(--text-2);background:var(--bg);margin-bottom:12px;
}
#pedro-ai-app .tq-ws-modal-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
#pedro-ai-app .tq-ws-modal-actions button{
  border:1px solid rgba(15,23,42,.12);border-radius:13px;background:#fff;color:var(--text);
  padding:11px 8px;font-size:12.5px;font-weight:900;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease;
}
#pedro-ai-app .tq-ws-modal-actions button:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(15,23,42,.12);}
#pedro-ai-app .tq-ws-modal-actions .tq-ws-results{background:#6C5CE7;color:#fff;border-color:#5546D6;}
#pedro-ai-app .tq-ws-modal-actions button:disabled{opacity:.5;cursor:wait;}

#pedro-ai-app .tq-ws-results-box{margin-top:16px;text-align:left;}
#pedro-ai-app .tq-ws-loading,
#pedro-ai-app .tq-ws-empty{padding:14px;border-radius:14px;background:var(--bg);border:1px solid var(--border);color:var(--text-3);font-size:13px;font-weight:800;text-align:center;}
#pedro-ai-app .tq-ws-stats{display:flex;gap:14px;justify-content:center;margin-bottom:12px;}
#pedro-ai-app .tq-ws-stats span{font-size:13px;font-weight:800;color:var(--text-3);}
#pedro-ai-app .tq-ws-stats b{color:#5546D6;font-size:16px;}
#pedro-ai-app .tq-ws-hard{background:#FFF7ED;border:1px solid #FED7AA;border-radius:16px;padding:12px 14px;margin-bottom:12px;}
#pedro-ai-app .tq-ws-hard strong{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#9A3412;margin-bottom:7px;}
#pedro-ai-app .tq-ws-hard div{display:grid;gap:1px;padding:6px 0;border-top:1px solid rgba(154,52,18,.14);}
#pedro-ai-app .tq-ws-hard div:first-of-type{border-top:0;}
#pedro-ai-app .tq-ws-hard span{font-size:13px;font-weight:800;color:#7C2D12;}
#pedro-ai-app .tq-ws-hard b{font-size:11.5px;font-weight:900;color:#B45309;}
#pedro-ai-app .tq-ws-hard small{font-size:12px;font-weight:700;color:#9A3412;opacity:.85;}
#pedro-ai-app .tq-ws-rows{display:grid;gap:6px;}
#pedro-ai-app .tq-ws-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;
  padding:10px 12px;border-radius:13px;border:1px solid var(--border);background:#fff;font-size:13px;font-weight:800;
}
#pedro-ai-app .tq-ws-row.is-good{border-color:rgba(5,150,105,.28);background:#F0FDF4;}
#pedro-ai-app .tq-ws-row.is-mid{border-color:rgba(234,88,12,.24);background:#FFF7ED;}
#pedro-ai-app .tq-ws-row.is-low{border-color:rgba(220,38,38,.24);background:#FEF2F2;}
#pedro-ai-app .tq-ws-who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#pedro-ai-app .tq-ws-who i{font-style:normal;font-size:10px;font-weight:900;background:#EEF2FF;color:#4338CA;border-radius:999px;padding:2px 6px;margin-left:5px;}
#pedro-ai-app .tq-ws-sc{color:var(--text-3);}
#pedro-ai-app .tq-ws-pct{color:#0f172a;font-weight:900;}
#pedro-ai-app .tq-ws-row .tq-ws-open{grid-column:1 / -1;font-size:11.5px;font-weight:800;color:#B45309;}
#pedro-ai-app .tq-worksheet-publish-btn{background:#6C5CE7 !important;color:#fff !important;border-color:#5546D6 !important;}
@media (max-width:520px){
  #pedro-ai-app .tq-ws-modal-actions{grid-template-columns:1fr 1fr;}
  #pedro-ai-app .tq-ws-modal-actions .tq-ws-results{grid-column:1 / -1;}
  #pedro-ai-app .tq-ws-qr img{width:200px;height:200px;}
}

/* ══════════════════════════════════════════════════════════════════════
   v6.61.0 — EDITOR ESTRUCTURADO DE FICHAS
   ══════════════════════════════════════════════════════════════════════ */
#pedro-ai-app .tq-wse{
  position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;padding:16px;
  background:rgba(15,23,42,.58);backdrop-filter:blur(6px);
}
#pedro-ai-app .tq-wse-card{
  width:min(760px,100%);max-height:92vh;display:flex;flex-direction:column;
  background:#fff;border-radius:24px;box-shadow:0 30px 80px rgba(15,23,42,.34);overflow:hidden;
}
#pedro-ai-app .tq-wse-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;border-bottom:1px solid var(--border);background:var(--bg);
}
#pedro-ai-app .tq-wse-head strong{font-size:16px;font-weight:900;}
#pedro-ai-app .tq-wse-head button{
  border:1px solid rgba(15,23,42,.14);border-radius:12px;background:#fff;color:var(--text);
  padding:9px 14px;font-size:13px;font-weight:900;cursor:pointer;margin-left:8px;
}
#pedro-ai-app .tq-wse-save{background:#6C5CE7 !important;color:#fff !important;border-color:#5546D6 !important;}
#pedro-ai-app .tq-wse-body{flex:1;overflow:auto;padding:18px 20px;display:grid;gap:14px;}
#pedro-ai-app .tq-wse-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
#pedro-ai-app .tq-wse-f{display:grid;gap:4px;}
#pedro-ai-app .tq-wse-f > span{font-size:10.5px;font-weight:900;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3);}
#pedro-ai-app .tq-wse-f input,
#pedro-ai-app .tq-wse-f textarea{
  width:100%;border:1px solid var(--border);border-radius:11px;padding:9px 11px;
  font:700 13.5px Inter,system-ui,sans-serif;color:#0f172a;background:#fff;
}
#pedro-ai-app .tq-wse-f input:focus,
#pedro-ai-app .tq-wse-f textarea:focus,
#pedro-ai-app .tq-wse-item input:focus{outline:none;border-color:#6C5CE7;box-shadow:0 0 0 3px rgba(108,92,231,.12);}
#pedro-ai-app .tq-wse-sec{border:1px solid var(--border);border-radius:18px;padding:14px;background:#FCFCFE;display:grid;gap:9px;}
#pedro-ai-app .tq-wse-sec-head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
#pedro-ai-app .tq-wse-badge{
  background:#F1EFFD;color:#4C3EC8;border:1px solid #D5CEF8;border-radius:999px;
  padding:5px 11px;font-size:11.5px;font-weight:900;
}
#pedro-ai-app .tq-wse-sec-btns button{
  border:1px solid var(--border);border-radius:9px;background:#fff;width:30px;height:30px;
  font-size:13px;font-weight:900;cursor:pointer;margin-left:4px;color:var(--text-3);
}
#pedro-ai-app .tq-wse-sec-btns .tq-wse-del:hover{background:#FEF2F2;border-color:#FECACA;color:#DC2626;}
#pedro-ai-app .tq-wse-items{display:grid;gap:6px;}
#pedro-ai-app .tq-wse-item{display:flex;gap:6px;align-items:center;}
#pedro-ai-app .tq-wse-item input{
  flex:1 1 0;min-width:0;border:1px solid var(--border);border-radius:10px;padding:8px 10px;
  font:700 13px Inter,system-ui,sans-serif;background:#fff;color:#0f172a;
}
#pedro-ai-app .tq-wse-idel{
  flex:0 0 auto;width:28px;height:28px;border:1px solid var(--border);border-radius:8px;background:#fff;
  color:var(--text-4);font-size:15px;font-weight:900;cursor:pointer;line-height:1;
}
#pedro-ai-app .tq-wse-idel:hover{background:#FEF2F2;border-color:#FECACA;color:#DC2626;}
#pedro-ai-app .tq-wse-iadd{
  justify-self:start;border:1px dashed #CBD5E1;border-radius:10px;background:#fff;color:var(--text-3);
  padding:7px 12px;font-size:12.5px;font-weight:900;cursor:pointer;
}
#pedro-ai-app .tq-wse-iadd:hover{border-color:#6C5CE7;color:#5546D6;}
#pedro-ai-app .tq-wse-foot{
  display:flex;gap:9px;padding:14px 20px;border-top:1px solid var(--border);background:var(--bg);
}
#pedro-ai-app .tq-wse-newtype{
  flex:1 1 auto;border:1px solid var(--border);border-radius:12px;padding:10px 12px;
  font:800 13px Inter,system-ui,sans-serif;background:#fff;color:#0f172a;
}
#pedro-ai-app .tq-wse-add{
  border:0;border-radius:12px;background:var(--text);color:#fff;padding:10px 16px;
  font-size:13px;font-weight:900;cursor:pointer;white-space:nowrap;
}
#pedro-ai-app .tq-worksheet-save-btn{background:#0F9D75 !important;color:#fff !important;border-color:#0B7D5C !important;}
@media (max-width:560px){
  #pedro-ai-app .tq-wse-meta{grid-template-columns:1fr;}
  #pedro-ai-app .tq-wse-item{flex-wrap:wrap;}
  #pedro-ai-app .tq-wse-item input{flex:1 1 100%;}
}

/* v6.61.1 — Texto de lectura dentro de la ficha (comprensión lectora). */
#pedro-ai-app .tq-visual-reading{
  background:var(--bg);border:1px solid var(--border);border-left:4px solid #6C5CE7;
  border-radius:14px;padding:16px 18px;margin:0 0 14px;
  font-size:15px;line-height:1.75;font-weight:600;color:var(--text);
}
@media print{
  #pedro-ai-app .tq-visual-reading{background:#fff !important;border:1px solid #CBD5E1 !important;border-left:3px solid #333 !important;}
}

/* ══════════════════════════════════════════════════════════════════════
   v6.62.0 — PANEL DE FICHAS
   ══════════════════════════════════════════════════════════════════════ */
#pedro-ai-app .tq-wsf-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px;
}
#pedro-ai-app .tq-wsf-wide{grid-column:1 / -1;}
#pedro-ai-app .tq-wsf-types{margin-bottom:14px;}
#pedro-ai-app .tq-wsf-types-label{
  display:block;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-3);margin-bottom:8px;
}
#pedro-ai-app .tq-wsf-chips{display:flex;flex-wrap:wrap;gap:7px;}
#pedro-ai-app .tq-wsf-chip{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  border:1.5px solid var(--border);border-radius:999px;padding:7px 13px;background:#fff;
  font-size:12.5px;font-weight:800;color:var(--text-3);transition:border-color .12s,background .12s,color .12s;
}
#pedro-ai-app .tq-wsf-chip input{width:15px;height:15px;accent-color:#6C5CE7;margin:0;}
#pedro-ai-app .tq-wsf-chip:has(input:checked){border-color:#6C5CE7;background:#F5F3FF;color:#4C3EC8;}
#pedro-ai-app .tq-wsf-go{width:100%;font-size:15px;padding:14px;}
#pedro-ai-app .tq-wsf-result{margin-top:16px;}
#pedro-ai-app .tq-wsf-loading{
  padding:16px;border-radius:16px;background:var(--text);color:#fff;
  font-size:13.5px;font-weight:900;display:flex;align-items:center;gap:10px;
}
#pedro-ai-app .tq-wsf-loading::before{
  content:"";width:9px;height:9px;border-radius:999px;background:#22c55e;
  box-shadow:0 0 0 4px rgba(34,197,94,.18);animation:tqLivePulse 1.6s ease infinite;
}
/* La ficha dentro del panel no necesita la burbuja del chat. */
#pedro-ai-app .tq-wsf-result .pedro-chat-bubble{
  max-width:none !important;width:100% !important;margin:0 !important;padding:0 !important;
  background:transparent !important;border:0 !important;box-shadow:none !important;
}
@media (max-width:900px){ #pedro-ai-app .tq-wsf-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px){ #pedro-ai-app .tq-wsf-grid{grid-template-columns:1fr;} }


/* ══════════════════════════════════════════════════════════════════════
   v6.62.1 — LEGIBILIDAD DE TODOS LOS BOTONES OSCUROS DE LA PIZARRA
   La regla general
     #pedro-ai-app .tq-wb-v3 .tq-wb-item button { color:var(--text) !important }
   (1 id + 3 clases) gana por especificidad al `color:#fff` de CUALQUIER botón
   con fondo oscuro dentro de una tarjeta: texto negro sobre fondo negro.
   Ya se corrigió para el juego de opciones; aquí se cierra para el resto
   (texto para practicar, arcade, reloj, ruleta, conjugador, ¿qué falta?,
   pictionary, notas de alumnos, dots activos y timer).
   ══════════════════════════════════════════════════════════════════════ */
#pedro-ai-app .tq-wb-v3 .tq-wb-item .tq-text-actions button,
#pedro-ai-app .tq-wb-item .tq-text-actions button,
#pedro-ai-app.pedro-whiteboard-mode .tq-text-actions button,
#pedro-ai-app .tq-wb-v3 .tq-wb-item .tq-wb-arcade-actions button,
#pedro-ai-app .tq-wb-item .tq-wb-arcade-actions button,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-arcade-actions button,
#pedro-ai-app .tq-wb-v3 .tq-wb-item .tq-wb-choice-controls button,
#pedro-ai-app .tq-wb-item .tq-wb-choice-controls button,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-choice-controls button,
#pedro-ai-app .tq-wb-v3 .tq-wb-item .tq-wb-clock button,
#pedro-ai-app .tq-wb-item .tq-wb-clock button,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-clock button,
#pedro-ai-app .tq-wb-v3 .tq-wb-item .tq-wb-color-roulette button,
#pedro-ai-app .tq-wb-item .tq-wb-color-roulette button,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-color-roulette button,
#pedro-ai-app .tq-wb-v3 .tq-wb-item .tq-wb-conj-actions button,
#pedro-ai-app .tq-wb-item .tq-wb-conj-actions button,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-conj-actions button,
#pedro-ai-app .tq-wb-v3 .tq-wb-item .tq-wb-pic-actions button,
#pedro-ai-app .tq-wb-item .tq-wb-pic-actions button,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-pic-actions button,
#pedro-ai-app .tq-wb-v3 .tq-wb-item .tq-wb-qf-controls button,
#pedro-ai-app .tq-wb-item .tq-wb-qf-controls button,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-qf-controls button,
#pedro-ai-app .tq-wb-v3 .tq-wb-item .tq-wb-roulette button,
#pedro-ai-app .tq-wb-item .tq-wb-roulette button,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-roulette button,
#pedro-ai-app .tq-wb-v3 .tq-wb-item .tq-collab-actions button:last-child,
#pedro-ai-app .tq-wb-item .tq-collab-actions button:last-child,
#pedro-ai-app.pedro-whiteboard-mode .tq-collab-actions button:last-child,
#pedro-ai-app .tq-wb-v3 .tq-wb-item .tq-choice-dots button.is-active,
#pedro-ai-app .tq-wb-item .tq-choice-dots button.is-active,
#pedro-ai-app.pedro-whiteboard-mode .tq-choice-dots button.is-active,
#pedro-ai-app .tq-wb-v3 .tq-wb-item .tq-wb-layer-grid button.is-active,
#pedro-ai-app .tq-wb-item .tq-wb-layer-grid button.is-active,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-layer-grid button.is-active,
#pedro-ai-app .tq-wb-v3 .tq-wb-item .tq-native-timer .tq-timer-actions button,
#pedro-ai-app .tq-wb-item .tq-native-timer .tq-timer-actions button,
#pedro-ai-app.pedro-whiteboard-mode .tq-native-timer .tq-timer-actions button {
  color: #FFFFFF !important;
}


/* ══════════════════════════════════════════════════════════════════════
   v6.92.0 — Y SU HOVER, QUE ERA EL AGUJERO QUE QUEDABA

   Arriba se fuerza texto blanco en todos estos botones porque su fondo es
   oscuro. Pero el hover general de las tarjetas
     #pedro-ai-app .tq-wb-v3 .tq-wb-item button:hover
   les aclaraba el fondo a #eef3f9, y como esa regla tiene MENOS
   especificidad que la de arriba (una clase menos), el color se quedaba en
   blanco: letra blanca sobre fondo casi blanco. Ilegible justo al apuntar,
   que es cuando el profesor está a punto de pulsar.

   Estos botones tienen su propio hover: se aclaran un poco, pero siguen
   siendo oscuros, y el blanco sigue teniendo contraste de sobra.
   ══════════════════════════════════════════════════════════════════════ */
#pedro-ai-app .tq-wb-v3 .tq-wb-item .tq-text-actions button:hover,
#pedro-ai-app .tq-wb-item .tq-text-actions button:hover,
#pedro-ai-app.pedro-whiteboard-mode .tq-text-actions button:hover,
#pedro-ai-app .tq-wb-v3 .tq-wb-item .tq-wb-arcade-actions button:hover,
#pedro-ai-app .tq-wb-item .tq-wb-arcade-actions button:hover,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-arcade-actions button:hover,
#pedro-ai-app .tq-wb-v3 .tq-wb-item .tq-wb-choice-controls button:hover,
#pedro-ai-app .tq-wb-item .tq-wb-choice-controls button:hover,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-choice-controls button:hover,
#pedro-ai-app .tq-wb-v3 .tq-wb-item .tq-wb-clock button:hover,
#pedro-ai-app .tq-wb-item .tq-wb-clock button:hover,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-clock button:hover,
#pedro-ai-app .tq-wb-v3 .tq-wb-item .tq-wb-color-roulette button:hover,
#pedro-ai-app .tq-wb-item .tq-wb-color-roulette button:hover,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-color-roulette button:hover,
#pedro-ai-app .tq-wb-v3 .tq-wb-item .tq-wb-conj-actions button:hover,
#pedro-ai-app .tq-wb-item .tq-wb-conj-actions button:hover,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-conj-actions button:hover,
#pedro-ai-app .tq-wb-v3 .tq-wb-item .tq-wb-pic-actions button:hover,
#pedro-ai-app .tq-wb-item .tq-wb-pic-actions button:hover,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-pic-actions button:hover,
#pedro-ai-app .tq-wb-v3 .tq-wb-item .tq-wb-qf-controls button:hover,
#pedro-ai-app .tq-wb-item .tq-wb-qf-controls button:hover,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-qf-controls button:hover,
#pedro-ai-app .tq-wb-v3 .tq-wb-item .tq-wb-roulette button:hover,
#pedro-ai-app .tq-wb-item .tq-wb-roulette button:hover,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-roulette button:hover,
#pedro-ai-app .tq-wb-v3 .tq-wb-item .tq-collab-actions button:last-child:hover,
#pedro-ai-app .tq-wb-item .tq-collab-actions button:last-child:hover,
#pedro-ai-app.pedro-whiteboard-mode .tq-collab-actions button:last-child:hover,
#pedro-ai-app .tq-wb-v3 .tq-wb-item .tq-choice-dots button.is-active:hover,
#pedro-ai-app .tq-wb-item .tq-choice-dots button.is-active:hover,
#pedro-ai-app.pedro-whiteboard-mode .tq-choice-dots button.is-active:hover,
#pedro-ai-app .tq-wb-v3 .tq-wb-item .tq-wb-layer-grid button.is-active:hover,
#pedro-ai-app .tq-wb-item .tq-wb-layer-grid button.is-active:hover,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-layer-grid button.is-active:hover,
#pedro-ai-app .tq-wb-v3 .tq-wb-item .tq-native-timer .tq-timer-actions button:hover,
#pedro-ai-app .tq-wb-item .tq-native-timer .tq-timer-actions button:hover,
#pedro-ai-app.pedro-whiteboard-mode .tq-native-timer .tq-timer-actions button:hover {
  background-color: var(--text) !important;   /* #101828 aclarado, sigue oscuro */
  color: #FFFFFF !important;
}

/* .tq-wb-qf-options queda FUERA a propósito: comparte la regla base oscura
   pero luego se redefine con fondo blanco (línea ~7650), así que forzarle
   texto blanco lo dejaba blanco sobre blanco. Verificado midiendo contraste. */

/* El estado "usado" sí es claro: ahí el texto debe volver a ser oscuro. */
#pedro-ai-app .tq-wb-v3 .tq-wb-item .tq-text-questions button.is-used,
#pedro-ai-app .tq-wb-v3 .tq-wb-item .tq-text-actions button.is-used,
#pedro-ai-app .tq-wb-item .tq-text-actions button.is-used {
  color: #166534 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   v6.64.0 — GUERRA DE ESPECIFICIDAD EN LA PIZARRA
   El "safe default" de la pizarra
     #pedro-ai-app .tq-wb-v3 button.pedro-btn-secondary  → (1 id, 2 clases, 1 tipo)
   gana por especificidad a las reglas concretas
     #pedro-ai-app .tq-wb-v3-actions .tq-wb-danger-action → (1 id, 2 clases)
   aunque estén escritas después. Resultado: estilos que existen en el CSS
   pero que nunca llegan a verse. Medido en el navegador:
     · «Limpiar» salía en índigo como cualquier otro botón, no en rojo:
       la acción que borra la pizarra entera no se distinguía.
     · Los botones de zoom (− 100% +) salían en azul marino en vez del
       índigo de la marca.
   Estas reglas llevan el selector de tipo para empatar en especificidad y
   ganar por orden. Contraste comprobado: 5.27:1, 4.77:1 y 6.49:1.
   ═══════════════════════════════════════════════════════════════════════ */

/* Ojo con la especificidad: `.tq-wb-v2-topbar #tq-wb-clear` lleva DOS ids
   y pinta var(--tq-wb-red), que pese al nombre vale #6C5CE7 (índigo). Por
   eso «Limpiar» salía igual que los demás botones. Este selector lleva los
   dos ids para ganar. */
#pedro-ai-app .tq-wb-v3 .tq-wb-v3-actions button#tq-wb-clear,
#pedro-ai-app .tq-wb-v3 .tq-wb-v3-actions button.tq-wb-danger-action {
  background: #f4f2ff !important;
  background-color: #f4f2ff !important;
  border-color: rgba(200,24,30,.22) !important;
  color: #c8181e !important;
}
#pedro-ai-app .tq-wb-v3 .tq-wb-v3-actions button#tq-wb-clear .tq-wb-action-icon,
#pedro-ai-app .tq-wb-v3 .tq-wb-v3-actions button#tq-wb-clear .tq-wb-action-label,
#pedro-ai-app .tq-wb-v3 .tq-wb-v3-actions button.tq-wb-danger-action .tq-wb-action-icon,
#pedro-ai-app .tq-wb-v3 .tq-wb-v3-actions button.tq-wb-danger-action .tq-wb-action-label {
  color: inherit !important;
}
#pedro-ai-app .tq-wb-v3 .tq-wb-v3-actions button#tq-wb-clear:hover,
#pedro-ai-app .tq-wb-v3 .tq-wb-v3-actions button.tq-wb-danger-action:hover {
  background: #fee2e2 !important;
  background-color: #fee2e2 !important;
  border-color: rgba(200,24,30,.42) !important;
  color: #c8181e !important;
}

#pedro-ai-app .tq-wb-v3 .tq-wb-v3-zoom-card button.pedro-btn-secondary {
  background: #fff !important;
  background-color: #fff !important;
  border-color: rgba(108,92,231,.16) !important;
  color: #5546D6 !important;
}
#pedro-ai-app .tq-wb-v3 .tq-wb-v3-zoom-card button.pedro-btn-secondary:hover {
  background: #6C5CE7 !important;
  background-color: #6C5CE7 !important;
  border-color: #6C5CE7 !important;
  color: #fff !important;
}

/* `overflow-wrap:anywhere` en el cuerpo de la tarjeta evita que una palabra
   larga desborde, pero también partía a mitad las etiquetas de los botones
   («Compr / obar»). En los controles solo se corta si la palabra no cabe. */
#pedro-ai-app .tq-wb-v2 .tq-wb-item-body button,
#pedro-ai-app .tq-wb-v2 .tq-wb-item-body label,
#pedro-ai-app .tq-wb-v2 .tq-wb-item-body select,
#pedro-ai-app .tq-wb-v2 .tq-wb-item-body option {
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   v6.64.1 — TRES FALLOS VISTOS EN CLASE
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. El título no crecía al estirar la tarjeta ──
   Su tipografía estaba atada al ANCHO DE LA VENTANA (clamp(30px,4vw,48px)),
   no al tamaño del elemento, así que arrastrar la esquina agrandaba la caja
   y dejaba la palabra igual de pequeña. Ahora usa el mismo --tq-scale que
   el resto de tarjetas: crece y encoge con la caja. */
#pedro-ai-app .tq-wb-v2 .tq-card-title .tq-native-title-main,
#pedro-ai-app .tq-wb-v2 .tq-native-title-card .tq-native-title-main,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2 .tq-card-title .tq-native-title-main,
#pedro-ai-app .tq-wb-v2 .tq-card-title .tq-rich-text-editor,
#pedro-ai-app .tq-wb-v2 .tq-card-title .tq-wb-item-body,
#pedro-ai-app .tq-wb-v2 .tq-native-title-card .tq-rich-text-editor,
#pedro-ai-app .tq-wb-v2 .tq-native-title-card .tq-wb-item-body {
  font-size: clamp(22px, calc(38px * var(--tq-scale, 1)), 200px) !important;
  line-height: 1.02 !important;
}
/* El subtítulo acompaña, en proporción. */
#pedro-ai-app .tq-wb-v2 .tq-card-title .tq-native-title-sub,
#pedro-ai-app .tq-wb-v2 .tq-native-title-card .tq-native-title-sub,
#pedro-ai-app.pedro-whiteboard-mode .tq-wb-v2 .tq-card-title .tq-native-title-sub {
  font-size: clamp(12px, calc(15px * var(--tq-scale, 1)), 46px) !important;
}
/* Con la tipografía ya escalada, un alto mínimo fijo dejaba un hueco muerto
   debajo de la palabra en las tarjetas pequeñas. */
#pedro-ai-app .tq-wb-v2 .tq-card-title .tq-native-title-main {
  min-height: 0 !important;
  padding: 4px 4px 2px !important;
}
/* La tarjeta nativa del título ocupa el alto disponible y centra su texto,
   para que al estirar en vertical la palabra quede en el medio. */
#pedro-ai-app .tq-wb-v2 .tq-card-title .tq-native-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  height: 100% !important;
}
/* El cuerpo ocupa todo el alto libre y centra el texto, para que al estirar
   en vertical la palabra quede centrada y no pegada arriba. */
#pedro-ai-app .tq-wb-v2 .tq-card-title .tq-wb-item-body {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 0 !important;
  height: auto !important;
  flex: 1 1 auto !important;
}
#pedro-ai-app .tq-wb-v2 .tq-card-title .tq-rich-text-editor {
  width: 100% !important;
  text-align: center !important;
}
#pedro-ai-app .tq-wb-v2 .tq-card-title {
  display: flex !important;
  flex-direction: column !important;
}

/* ── 2. La barra de grosor estaba siempre entera de color ──
   Parecía el máximo aunque estuviera al mínimo. Ahora el carril es claro y
   se rellena de índigo solo hasta el valor: --tq-fill lo fija el JS. */
#pedro-ai-app .tq-wb-v3-settings-card #tq-wb-size::-webkit-slider-runnable-track {
  background: linear-gradient(90deg,
    #6C5CE7 0, #6C5CE7 var(--tq-fill, 0%),
    #E8EAEF var(--tq-fill, 0%), #E8EAEF 100%) !important;
  border: 1px solid #DCDEE9 !important;
}
#pedro-ai-app .tq-wb-v3-settings-card #tq-wb-size::-moz-range-track {
  background: #E8EAEF !important;
  border: 1px solid #DCDEE9 !important;
}
#pedro-ai-app .tq-wb-v3-settings-card #tq-wb-size::-moz-range-progress {
  height: 6px !important;
  border-radius: 999px !important;
  background: #6C5CE7 !important;
}
#pedro-ai-app .tq-wb-v3-settings-card #tq-wb-size::-webkit-slider-thumb {
  background: #6C5CE7 !important;
  border: 3px solid #fff !important;
  box-shadow: 0 4px 10px rgba(108,92,231,.34) !important;
}
#pedro-ai-app .tq-wb-v3-settings-card #tq-wb-size::-moz-range-thumb {
  background: #6C5CE7 !important;
  border: 3px solid #fff !important;
  box-shadow: 0 4px 10px rgba(108,92,231,.34) !important;
}

/* ── 3. Modo presentación: el lienzo se quedaba en una franja estrecha ──
   El taller es una rejilla de tres columnas (carril · lienzo · panel). Al
   ocultar carril y panel, el lienzo caía en la PRIMERA columna —la del
   carril, ~185px— y todo lo demás quedaba en blanco. Con `display:block`
   las columnas dejan de existir y el lienzo ocupa el ancho completo, pase
   lo que pase con el resto de reglas de rejilla. */
#pedro-ai-app .pedro-whiteboard-panel-wrapper.tq-wb-presenting .tq-wb-workspace {
  display: block !important;
  grid-template-columns: none !important;
  grid-template-areas: none !important;
  gap: 0 !important;
  height: 100% !important;
  min-height: calc(100dvh - 28px) !important;
}
#pedro-ai-app .pedro-whiteboard-panel-wrapper.tq-wb-presenting .tq-whiteboard-stage {
  width: 100% !important;
  max-width: none !important;
  flex: 1 1 auto !important;
  grid-column: 1 / -1 !important;
}
#pedro-ai-app .pedro-whiteboard-panel-wrapper.tq-wb-presenting {
  padding: 10px !important;
  background: #F8F9FB !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   v6.65.0 — PLAN GRATUITO Y ANUNCIOS
   El medidor tiene que informar sin dar la lata: vive en el inicio y en la
   biblioteca, con los tonos de Teeqo Teacher Studio y sin gritar. El aviso
   de techo aparece solo cuando el servidor dice que no queda margen.
   ═══════════════════════════════════════════════════════════════════════ */

#pedro-ai-app .tq-plan-card {
  background: #fff;
  border: 1px solid #E8EAEF;
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: 0 10px 30px rgba(23,18,51,.06);
  margin-bottom: 14px;
}
#pedro-ai-app .tq-plan-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 12px; flex-wrap: wrap;
}
#pedro-ai-app .tq-plan-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #F1EFFD; color: #5546D6; border: 1px solid rgba(108,92,231,.20);
  border-radius: 999px; padding: 5px 11px;
  font-size: 11.5px; font-weight: 950; letter-spacing: .03em; text-transform: uppercase;
}
#pedro-ai-app .tq-plan-up {
  font-size: 12.5px; font-weight: 900; color: #C2410C; text-decoration: none;
  border-bottom: 1.5px solid rgba(240,86,47,.35);
}
#pedro-ai-app .tq-plan-up:hover { color: #F0562F; border-bottom-color: #F0562F; }

#pedro-ai-app .tq-plan-row {
  display: grid; grid-template-columns: minmax(0,1fr) 96px auto;
  align-items: center; gap: 10px; margin-bottom: 9px;
}
#pedro-ai-app .tq-plan-lbl { font-size: 12.5px; font-weight: 800; color: #3D4054; }
#pedro-ai-app .tq-plan-bar {
  height: 7px; border-radius: 999px; background: #F3F4F8;
  border: 1px solid #E8EAEF; overflow: hidden;
}
#pedro-ai-app .tq-plan-bar i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #6C5CE7, #FB8A4B);
  transition: width .4s cubic-bezier(.2,.9,.3,1);
}
#pedro-ai-app .tq-plan-num { font-size: 12px; font-weight: 950; color: #62667E; }
#pedro-ai-app .tq-plan-row.is-full .tq-plan-bar i { background: linear-gradient(90deg, #FB8A4B, #F0562F); }
#pedro-ai-app .tq-plan-row.is-full .tq-plan-num { color: #C2410C; }
#pedro-ai-app .tq-plan-note {
  margin: 10px 0 0; font-size: 11.5px; font-weight: 700; line-height: 1.5; color: #62667E;
}

/* Aviso de techo alcanzado */
#pedro-ai-app .tq-plan-modal, .tq-plan-modal {
  position: fixed; inset: 0; z-index: 2147483300;
  display: grid; place-items: center; padding: 20px;
  background: rgba(23,18,51,.52); backdrop-filter: blur(6px);
  animation: tqPlanIn .18s ease both;
}
@keyframes tqPlanIn { from { opacity: 0 } to { opacity: 1 } }
.tq-plan-modal-card {
  width: min(430px, 100%); background: #fff; border-radius: 24px;
  padding: 26px 24px; text-align: center;
  box-shadow: 0 30px 70px rgba(23,18,51,.30);
  animation: tqPlanUp .28s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes tqPlanUp { from { transform: translateY(16px) scale(.97) } to { transform: none } }
.tq-plan-modal-emoji { font-size: 46px; line-height: 1 }
.tq-plan-modal-card h3 {
  margin: 12px 0 6px; font-size: 20px; font-weight: 1000; color: #111318;
}
.tq-plan-modal-card p {
  margin: 0 0 18px; font-size: 14px; font-weight: 650; line-height: 1.55; color: #3D4054;
}
.tq-plan-modal-actions { display: grid; gap: 9px }
.tq-plan-modal-go {
  display: block; border-radius: 15px; padding: 13px 16px; text-decoration: none;
  background: linear-gradient(135deg, #6C5CE7, #5546D6); color: #fff;
  font-size: 15px; font-weight: 1000;
  box-shadow: 0 12px 26px rgba(108,92,231,.30);
}
.tq-plan-modal-close {
  border: 1px solid #D8DAE5; background: #fff; color: #3D4054;
  border-radius: 15px; padding: 11px 16px; font-size: 13.5px; font-weight: 850; cursor: pointer;
}
.tq-plan-modal-close:hover { border-color: #6C5CE7; color: #5546D6 }

/* ── Anuncios ──
   Reservan su alto para que la interfaz no pegue un salto cuando cargan (o
   cuando un bloqueador los deja vacíos, que pasa a menudo). Van marcados
   como publicidad, en gris y fuera del flujo de trabajo. */
#pedro-ai-app .tq-ad {
  display: block; margin: 16px 0; padding: 10px;
  background: #F8F9FB; border: 1px dashed #D8DAE5; border-radius: 16px;
  min-height: 116px; text-align: center; overflow: hidden;
}
#pedro-ai-app .tq-ad-label {
  display: block; margin-bottom: 6px;
  font-size: 9.5px; font-weight: 900; letter-spacing: .10em;
  text-transform: uppercase; color: #7B7F96;
}
#pedro-ai-app .tq-ad-unit { min-height: 90px }
#pedro-ai-app .tq-ad-remove {
  display: inline-block; margin-top: 8px;
  font-size: 11px; font-weight: 850; color: #62667E; text-decoration: none;
  border-bottom: 1px solid rgba(98,102,126,.35);
}
#pedro-ai-app .tq-ad-remove:hover { color: #5546D6; border-bottom-color: #5546D6 }

/* Nunca en la pizarra ni presentando: aunque una plantilla se equivoque y
   pinte un hueco donde no toca, aquí no se ve. */
#pedro-ai-app #pedro-whiteboard-panel .tq-ad,
#pedro-ai-app .tq-wb-presenting .tq-ad,
#pedro-ai-app .pedro-ai-panel[data-student-view] .tq-ad { display: none !important }

@media (max-width: 620px) {
  #pedro-ai-app .tq-plan-row { grid-template-columns: minmax(0,1fr) 64px auto }
  #pedro-ai-app .tq-ad { min-height: 100px }
}

/* ── Maqueta de anuncio (modo de prueba, sin llamar a Google) ──
   Ocupa lo mismo que ocuparía el anuncio real, para poder juzgar dónde cae
   y cuánto molesta antes de tener cuenta de AdSense. */
#pedro-ai-app .tq-ad-mockbox {
  display: grid; place-content: center; gap: 4px;
  min-height: 92px; padding: 14px;
  border: 1px dashed #C7C3E8; border-radius: 12px;
  background: repeating-linear-gradient(135deg, #F4F3FC 0 10px, #EFEDFA 10px 20px);
  text-align: center;
}
#pedro-ai-app .tq-ad-mock-tag {
  justify-self: center; margin-bottom: 2px;
  background: #5546D6; color: #fff; border-radius: 999px; padding: 3px 10px;
  font-size: 9.5px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
}
#pedro-ai-app .tq-ad-mockbox b { font-size: 14px; font-weight: 900; color: #3D4054 }
#pedro-ai-app .tq-ad-mockbox small { font-size: 11.5px; font-weight: 700; color: #62667E }

/* ══════════════════════════════════════════════════════════════
   EDITOR DE JUEGOS
   Se abre encima de lo que el profesor ya tiene en pantalla, sin
   sacarlo de donde estaba. Los controles los monta el editor
   leyendo la forma del juego, así que aquí solo hay estilo.
   ══════════════════════════════════════════════════════════════ */
/* Esta hoja no pone border-box de forma global, así que un input al 100%
   más su padding se sale de la tarjeta y aparece scroll horizontal. Se
   declara aquí dentro para no cambiar el resto de la plataforma. */
.pge-wrap,.pge-wrap *,.pge-wrap *::before,.pge-wrap *::after{box-sizing:border-box}
.pge-wrap{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:20px}
/* Abierto como <dialog> nativo: se pinta en la capa superior del navegador,
   así que ni z-index, ni overflow, ni un transform del tema pueden dejarlo
   fuera de la pantalla. Hay que quitarle los estilos que trae de fábrica. */
.pge-wrap.pge-nativo{
  border:0;padding:20px;max-width:100%;max-height:100%;width:100%;height:100%;
  background:transparent;overflow:visible;
}
.pge-wrap.pge-nativo::backdrop{background:rgba(17,19,24,.52);backdrop-filter:blur(3px)}
.pge-wrap.pge-nativo:not([open]){display:none}
.pge-back{position:absolute;inset:0;background:rgba(17,19,24,.52);backdrop-filter:blur(3px)}
.pge-panel{
  position:relative;display:flex;flex-direction:column;
  width:min(720px,100%);max-height:min(86vh,900px);
  background:var(--surface,#fff);border:1px solid var(--border,#E8EAEF);border-radius:20px;
  box-shadow:0 30px 80px rgba(17,19,24,.28);overflow:hidden;
}
.pge-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;border-bottom:1px solid var(--border,#E8EAEF);flex:0 0 auto;
}
.pge-head b{display:block;font-size:16px;font-weight:800;letter-spacing:-.01em}
.pge-head span{font-size:12px;font-weight:500;color:var(--text-4,#62667E)}
.pge-close{
  border:1px solid var(--border,#E8EAEF);background:var(--bg,#F8F9FB);color:var(--text-4,#62667E);
  width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:13px;line-height:1;flex:0 0 auto;
}
.pge-close:hover{color:var(--text-1,#111318)}
.pge-body{padding:18px 20px;overflow:auto;flex:1 1 auto;display:flex;flex-direction:column;gap:12px}
.pge-foot{
  display:flex;gap:10px;justify-content:flex-end;padding:14px 20px;
  border-top:1px solid var(--border,#E8EAEF);background:var(--bg,#F8F9FB);flex:0 0 auto;
}

.pge-row{display:flex;flex-direction:column;gap:5px}
.pge-lbl{font-size:11.5px;font-weight:650;color:var(--text-4,#62667E);letter-spacing:.01em}
.pge-in{
  width:100%;border:1.5px solid var(--border,#E8EAEF);border-radius:11px;padding:10px 12px;
  font:500 14.5px Inter,system-ui,sans-serif;background:#fff;color:var(--text-1,#111318);outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.pge-in:focus{border-color:var(--primary,#6C5CE7);box-shadow:0 0 0 3px rgba(108,92,231,.12)}
.pge-ta{resize:vertical;line-height:1.55;font-weight:450}
.pge-bool{flex-direction:row;align-items:center;gap:9px;font-size:14px;font-weight:600;cursor:pointer}
.pge-bool input{width:18px;height:18px;accent-color:var(--primary,#6C5CE7);cursor:pointer}

/* Listas y fichas repetidas */
.pge-group{border:1px solid var(--border,#E8EAEF);border-radius:14px;padding:14px;background:var(--bg,var(--bg))}
.pge-group-t{
  font-size:11.5px;font-weight:750;color:var(--text-3,#3D4054);text-transform:uppercase;
  letter-spacing:.06em;margin-bottom:10px;
}
.pge-group-t i{font-style:normal;font-weight:600;color:var(--text-4,#62667E)}
.pge-list{display:flex;flex-direction:column;gap:7px}
.pge-li{display:flex;gap:7px;align-items:center}
.pge-li .pge-in{flex:1}
.pge-cards{display:flex;flex-direction:column;gap:10px}
.pge-card{background:#fff;border:1px solid var(--border,#E8EAEF);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:9px}
.pge-card-h{display:flex;align-items:center;justify-content:space-between}
.pge-card-h b{
  font-size:11px;font-weight:800;color:var(--primary-dark,#5546D6);
  background:rgba(108,92,231,.10);border-radius:999px;padding:3px 10px;
}
.pge-x{
  border:1px solid var(--border,#E8EAEF);background:#fff;color:var(--text-4,#62667E);
  width:28px;height:28px;border-radius:8px;cursor:pointer;font-size:11px;line-height:1;flex:0 0 auto;
  transition:all .15s;
}
.pge-x:hover{border-color:#FECACA;background:#FEF2F2;color:#B91C1C}
.pge-add{
  margin-top:9px;border:1px dashed var(--border-2,#D8DAE5);background:#fff;color:var(--text-4,#62667E);
  border-radius:10px;padding:8px 14px;font-size:12.5px;font-weight:650;cursor:pointer;transition:all .15s;
}
.pge-add:hover{border-color:var(--primary,#6C5CE7);color:var(--primary-dark,#5546D6);background:rgba(108,92,231,.05)}

@media (max-width:600px){
  .pge-wrap{padding:0}
  .pge-panel{width:100%;max-height:100vh;height:100%;border-radius:0;border:0}
}
@media (prefers-reduced-motion:reduce){.pge-wrap *{animation:none!important;transition:none!important}}


/* ══════════════════════════════════════════════════════════════
   FUENTE DE LOS CONTROLES

   Los <button>, <input>, <select> y <textarea> NO heredan la fuente:
   el navegador les pone la suya. Por eso «Enviar a pizarra» en la
   tarjeta del dato cultural salía con otra letra que el resto.

   Se arregla para todos de una vez, no botón a botón, porque el
   siguiente que alguien añada tendría el mismo problema.

   Va dentro de :where() a propósito: así pesa CERO en la especificidad
   y cualquier regla que ya declare su fuente sigue mandando. Es un
   suelo, no una imposición.
   ══════════════════════════════════════════════════════════════ */
:where(#pedro-ai-app button, #pedro-ai-app input, #pedro-ai-app select,
       #pedro-ai-app textarea, #pedro-ai-app optgroup, #pedro-ai-app option) {
  font-family: inherit;
  font-size: 100%;
  line-height: inherit;
}

/* ── Aula web, en la ficha de la clase ────────────────────────────
   El profesor reparte esta dirección a quien no pueda usar la app. */
#pedro-ai-app .tq-cls-web{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:space-between;
  margin-top:14px;padding:14px 18px;border-radius:16px;
  background:var(--surface-2,var(--surface-2));border:1px solid var(--border,#E8EAEF);
}
#pedro-ai-app .tq-cls-web-txt{min-width:0;flex:1 1 260px}
#pedro-ai-app .tq-cls-web-txt b{display:block;font-size:14px;font-weight:750;letter-spacing:-.01em}
#pedro-ai-app .tq-cls-web-txt span{display:block;margin-top:3px;font-size:12.5px;font-weight:450;color:var(--text-4,#62667E);line-height:1.5}
#pedro-ai-app .tq-cls-web-copy{flex:0 0 auto;font-size:12.5px;padding:8px 15px}


/* ── Aula web: lo que no es del alumno ────────────────────────────
   El portal carga este mismo archivo para que el material se vea igual que
   en el panel. Pero dentro de los propios renderizadores hay acciones de
   profesor —encadenar generaciones, exportar a Quizlet, mandar a la
   pizarra—: todas necesitan sesión de profesor y fallarían. Un botón que
   falla es peor que ningún botón, así que en el aula no se pintan.
   Se hace por CSS y no tocando cada renderizador: son 41 y esto no se
   queda viejo cuando alguien añada el 42. */
#pedro-ai-app.tq-aula-app .p-chain-bar,
#pedro-ai-app.tq-aula-app .p-csv-vocab-btn,
#pedro-ai-app.tq-aula-app .p-material-toolbar,
#pedro-ai-app.tq-aula-app .pedro-print-bar,
#pedro-ai-app.tq-aula-app .p-print-btn,
#pedro-ai-app.tq-aula-app .p-lib-actions,
#pedro-ai-app.tq-aula-app .tq-reading-interactive,
#pedro-ai-app.tq-aula-app .p-material-whiteboard,
#pedro-ai-app.tq-aula-app .p-material-save,
#pedro-ai-app.tq-aula-app .p-material-remix,
#pedro-ai-app.tq-aula-app .p-material-edit,
#pedro-ai-app.tq-aula-app .p-game-print,
#pedro-ai-app.tq-aula-app .p-game-next,
#pedro-ai-app.tq-aula-app .p-game-teams{ display:none!important; }

/* ── Anuncio cuadrado ──────────────────────────────────────────────
   Un banner apaisado en una columna estrecha no lo compra nadie; el
   formato rectángulo (300×250 y parientes) es el que tiene demanda.
   Se reserva el alto para que la interfaz no dé un salto cuando el
   anuncio carga, o cuando no carga por un bloqueador. */
#pedro-ai-app .tq-ad-square { max-width: 340px; margin-left: auto; margin-right: auto; }
#pedro-ai-app .tq-ad-square .tq-ad-unit { min-height: 250px; }
#pedro-ai-app .tq-ad-square.tq-ad-mock .tq-ad-mockbox {
  min-height: 250px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
}
@media (max-width: 520px) {
  #pedro-ai-app .tq-ad-square { max-width: 100%; }
}

/* ══════════════════════════════════════════════════════════════
   TABLÓN DE LA CLASE (lado del profesor)

   Se quedó sin estilos al añadirlo, y por eso el botón «Publicar»
   salía pegado al campo de texto.
   ══════════════════════════════════════════════════════════════ */
#pedro-ai-app .tq-board-switch{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-size:12.5px;font-weight:600;color:var(--text-3,#3D4054);
  background:var(--surface-2,var(--surface-2));border:1px solid var(--border,#E8EAEF);
  border-radius:999px;padding:7px 14px;transition:all .15s;
}
#pedro-ai-app .tq-board-switch:hover{border-color:var(--primary,#6C5CE7)}
#pedro-ai-app .tq-board-switch input{
  width:16px;height:16px;margin:0;cursor:pointer;accent-color:var(--primary,#6C5CE7);
}

/* El campo y su botón: uno debajo del otro, con aire y el botón a la
   derecha. Antes iban pegados porque no había ninguna regla. */
#pedro-ai-app .tq-board-new{
  display:flex;flex-direction:column;gap:10px;align-items:flex-end;
  margin:14px 0 18px;
}
#pedro-ai-app .tq-board-new textarea{
  width:100%;border:1.5px solid var(--border,#E8EAEF);border-radius:14px;
  padding:12px 14px;font-family:inherit;font-size:14.5px;font-weight:450;line-height:1.55;
  background:#fff;color:var(--text-1,#111318);outline:none;resize:vertical;min-height:64px;
  transition:border-color .15s,box-shadow .15s;
}
#pedro-ai-app .tq-board-new textarea::placeholder{color:var(--text-4,var(--text-4));font-weight:450}
#pedro-ai-app .tq-board-new textarea:focus{
  border-color:var(--primary,#6C5CE7);box-shadow:0 0 0 4px rgba(108,92,231,.11);
}
#pedro-ai-app .tq-board-new button{flex:0 0 auto;font-size:13.5px;padding:10px 20px}

#pedro-ai-app .tq-board-list{display:flex;flex-direction:column;gap:10px}
#pedro-ai-app .tq-board-vacio{
  margin:0;padding:18px;text-align:center;border-radius:14px;
  background:var(--surface-2,var(--surface-2));border:1px dashed var(--border-2,#D8DAE5);
  font-size:13.5px;font-weight:450;color:var(--text-4,#62667E);line-height:1.55;
}
#pedro-ai-app .tq-board-msg{
  border-radius:14px;padding:12px 14px;
  background:var(--surface-2,var(--surface-2));border:1px solid var(--border,#E8EAEF);
}
/* El del profesor manda visualmente sobre el de un alumno. */
#pedro-ai-app .tq-board-msg.es-profe{
  background:linear-gradient(135deg,rgba(108,92,231,.08),rgba(108,92,231,.03));
  border-color:rgba(108,92,231,.22);
}
#pedro-ai-app .tq-board-msg-top{display:flex;align-items:center;gap:8px;margin-bottom:5px}
#pedro-ai-app .tq-board-msg-top b{font-size:13px;font-weight:750}
/* v6.141.0 — :not(.tq-board-av).
   Esta regla es para el «hace 2 horas» de la cabecera, pero dice «span» a
   secas y el avatar de quien firma TAMBIÉN es un span. Con un id, una
   clase y un elemento pesa más que `#pedro-ai-app .tq-board-av`, así que
   le ganaba el color: la inicial de cada alumno salía en gris sobre su
   círculo de color, a 11,5px y en peso 450 — ilegible, y en la pantalla
   donde el profesor reconoce de un vistazo quién ha escrito. Está así
   desde que se añadió el avatar en la v6.115.0. */
#pedro-ai-app .tq-board-msg-top span:not(.tq-board-av){font-size:11.5px;font-weight:450;color:var(--text-4,#62667E)}
#pedro-ai-app .tq-board-vistos{
  font-size:11px;font-weight:700;color:var(--text-4,#62667E);
  background:#fff;border:1px solid var(--border,#E8EAEF);border-radius:999px;padding:2px 9px;
}
#pedro-ai-app .tq-board-x{
  margin-left:auto;flex:0 0 auto;border:1px solid var(--border,#E8EAEF);background:#fff;
  color:var(--text-4,#62667E);width:26px;height:26px;border-radius:8px;cursor:pointer;
  font-size:14px;line-height:1;transition:all .15s;
}
#pedro-ai-app .tq-board-x:hover{border-color:#FECACA;background:#FEF2F2;color:#B91C1C}
#pedro-ai-app .tq-board-msg p{
  margin:0;font-size:14px;font-weight:450;line-height:1.55;color:var(--text-2,var(--text-2));
}

/* ── Pestañas de la ficha de clase ─────────────────────────────────
   Recursos y tablón estaban uno debajo del otro: con veinte recados,
   compartir un recurso era bajar media pantalla. */
#pedro-ai-app .tq-cls-tabs{display:flex;gap:8px;margin:18px 0 14px}
#pedro-ai-app .tq-cls-tab{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--border,#E8EAEF);background:var(--surface,#fff);
  color:var(--text-4,#62667E);border-radius:14px;padding:12px 14px;
  font-family:inherit;font-size:14px;font-weight:650;cursor:pointer;transition:all .15s;
}
#pedro-ai-app .tq-cls-tab:hover{border-color:var(--primary,#6C5CE7);color:var(--text-2,var(--text-2))}
#pedro-ai-app .tq-cls-tab i{
  font-style:normal;font-size:11px;font-weight:750;
  background:var(--surface-2,var(--surface-2));color:var(--text-4,#62667E);
  border-radius:999px;padding:2px 8px;
}
#pedro-ai-app .tq-cls-tab.on{
  background:var(--primary,#6C5CE7);border-color:var(--primary,#6C5CE7);color:#fff;
  box-shadow:0 6px 16px rgba(108,92,231,.22);
}
#pedro-ai-app .tq-cls-tab.on i{background:rgba(255,255,255,.22);color:#fff}
#pedro-ai-app [data-panel][hidden]{display:none!important}

/* ══════════════════════════════════════════════════════════════════════
   LOS CÓDIGOS DE ACCESO DE LA CLASE — v6.87.0

   Una rejilla de tarjetitas, una por alumno. El código grande porque es
   lo que el profesor va a leer en voz alta o copiar en un papel; la
   etiqueta pequeña y opcional, que es donde podría acabar el nombre de
   un menor y no queremos invitar a escribirlo.
   ══════════════════════════════════════════════════════════════════════ */
#pedro-ai-app .tq-seats-explica{
  margin:0 0 10px;font-size:12.5px;font-weight:450;line-height:1.6;
  color:var(--text-3,#4A4F68);
}
#pedro-ai-app .tq-seats-explica b{
  font-weight:800;letter-spacing:.08em;color:var(--text,#141726);
}
#pedro-ai-app .tq-seats-aviso{
  display:block;margin-top:6px;font-size:11.5px;line-height:1.55;
  color:var(--text-4,#62667E);
}
#pedro-ai-app .tq-seats-resumen{
  margin:0 0 12px;font-size:11.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--text-4,#62667E);
}
#pedro-ai-app .tq-seats-acciones{display:flex;gap:8px;flex-wrap:wrap}
#pedro-ai-app .tq-seats-acciones .pedro-btn-secondary{font-size:12.5px;padding:8px 13px}

#pedro-ai-app .tq-seats-grid{
  display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
}
#pedro-ai-app .tq-seat{
  box-sizing:border-box;
  border:1px solid var(--border,#E4E6EF);border-radius:14px;padding:12px 11px 9px;
  background:var(--bg,#fff);text-align:center;
  display:flex;flex-direction:column;gap:7px;
  transition:border-color .15s,box-shadow .15s;
}
#pedro-ai-app .tq-seat.is-usado{
  border-color:rgba(16,163,74,.42);
  box-shadow:inset 0 0 0 1px rgba(16,163,74,.10);
}
#pedro-ai-app .tq-seat.is-anulado{opacity:.55}
#pedro-ai-app .tq-seat.is-anulado .tq-seat-code{text-decoration:line-through}
#pedro-ai-app .tq-seat-code{
  font-size:21px;font-weight:800;letter-spacing:.14em;line-height:1.1;
  color:var(--text,#141726);
}
#pedro-ai-app .tq-seat-label{
  box-sizing:border-box;width:100%;
  border:1px solid var(--border,#E4E6EF);border-radius:8px;padding:5px 7px;
  font-family:inherit;font-size:11.5px;font-weight:550;text-align:center;
  background:var(--bg2,var(--bg));color:var(--text,#141726);
}
#pedro-ai-app .tq-seat-label::placeholder{font-weight:450;color:var(--text-4,#62667E)}
#pedro-ai-app .tq-seat-label:focus{
  outline:none;border-color:var(--red,#DC2626);background:var(--bg,#fff);
}
#pedro-ai-app .tq-seat-pie{
  display:flex;align-items:center;justify-content:center;gap:5px;
  border-top:1px solid var(--border,#E4E6EF);padding-top:7px;
}
#pedro-ai-app .tq-seat-estado{
  flex:1;min-width:0;font-size:10.5px;font-weight:650;text-align:left;
  color:var(--text-4,#62667E);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#pedro-ai-app .tq-seat.is-usado .tq-seat-estado{color:#10A34A}
#pedro-ai-app .tq-seat-btn{
  flex:0 0 auto;border:1px solid var(--border,#E4E6EF);border-radius:7px;
  width:24px;height:24px;padding:0;cursor:pointer;line-height:1;
  background:var(--bg,#fff);color:var(--text-3,#4A4F68);font-size:12px;
  display:grid;place-items:center;transition:background .13s,color .13s,border-color .13s;
}
#pedro-ai-app .tq-seat-btn:hover{background:var(--bg2,var(--bg));color:var(--text,#141726)}
#pedro-ai-app .tq-seat-btn:disabled{opacity:.45;cursor:default}
#pedro-ai-app .tq-seat-x:hover{
  border-color:rgba(220,38,38,.40);background:rgba(220,38,38,.07);color:var(--red,#DC2626);
}

#pedro-ai-app .tq-seats-add{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin-top:14px;padding-top:13px;border-top:1px solid var(--border,#E4E6EF);
}
#pedro-ai-app .tq-seats-add label{
  font-size:12.5px;font-weight:650;color:var(--text-3,#4A4F68);margin:0;
}
#pedro-ai-app .tq-seats-add input{
  box-sizing:border-box;width:84px;
  border:1px solid var(--border,#E4E6EF);border-radius:9px;padding:8px 10px;
  font-family:inherit;font-size:14px;font-weight:700;text-align:center;
  background:var(--bg,#fff);color:var(--text,#141726);
}
#pedro-ai-app .tq-seats-add input:focus{outline:none;border-color:var(--red,#DC2626)}

/* La nota del modal de nueva clase: explica qué hace el número de alumnos
   sin que parezca un aviso legal. */
#pedro-ai-app .tq-modal-nota,
.tq-modal-nota{
  margin:8px 0 0;font-size:12px;font-weight:450;line-height:1.55;
  color:var(--text-4,#62667E);
}

/* ══════════════════════════════════════════════════════════════════════
   AVISO DE SESIÓN CADUCADA — v6.88.0

   Va por encima de todo y sin salida que no sea volver a entrar: si el
   servidor ya no sabe quién eres, cualquier cosa que se enseñe detrás es
   mentira. Fuera de #pedro-ai-app a propósito, para que ningún panel con
   transform lo atrape en su contexto de apilado.
   ══════════════════════════════════════════════════════════════════════ */
.tq-sesion-overlay{
  position:fixed;inset:0;z-index:2147483000;
  display:grid;place-items:center;padding:24px;
  background:rgba(10,12,22,.62);backdrop-filter:blur(7px) saturate(1.2);
  font-family:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
}
.tq-sesion-card{
  box-sizing:border-box;width:100%;max-width:380px;
  background:#fff;border-radius:20px;padding:26px 24px 22px;text-align:center;
  box-shadow:0 26px 60px rgba(10,12,22,.34);
}
.tq-sesion-ico{
  width:54px;height:54px;margin:0 auto 14px;border-radius:17px;
  display:grid;place-items:center;font-size:25px;
  background:linear-gradient(140deg,#3B2FA3,#6C5CE7);
}
.tq-sesion-card h3{
  margin:0 0 8px;font-size:19px;font-weight:780;letter-spacing:-.02em;color:#141726;
}
.tq-sesion-card p{
  margin:0 0 20px;font-size:14px;font-weight:450;line-height:1.55;color:#4A4F68;
}
.tq-sesion-btn{
  width:100%;border:0;border-radius:13px;padding:14px;cursor:pointer;
  font-family:inherit;font-size:15.5px;font-weight:750;color:#fff;
  background:linear-gradient(135deg,#6C5CE7,#3B2FA3);
  box-shadow:0 10px 22px rgba(108,92,231,.30);
  transition:transform .12s,filter .15s;
}
.tq-sesion-btn:hover{filter:brightness(1.06)}
.tq-sesion-btn:active{transform:scale(.985)}

@media (prefers-color-scheme: dark){
  .tq-sesion-card{background:#171A2B}
  .tq-sesion-card h3{color:#F2F3F8}
  .tq-sesion-card p{color:#A8ADC4}
}

/* ══════════════════════════════════════════════════════════════════════
   v6.92.0 — LOS SELLOS: CENTRADOS, Y QUE SE PUEDAN QUITAR

   Dos fallos con una sola causa. El bloque del sello coloca su aspa como
   una chapa en la esquina (top:-10, right:-10), pero la regla general de
   las tarjetas fuerza `position:static !important` en TODAS las aspas.
   Resultado:

     · el aspa no va a la esquina: se queda dentro de la cabecera, que es
       un flex con space-between, y empuja el emoji 15px a la izquierda
       (medido). De ahí que el sello se viera descentrado;
     · y como además tiene opacity:0 hasta el hover, en una pizarra táctil
       —que es donde se usa esto— no aparece nunca. No había forma de
       quitar un sello del lienzo.

   Aquí se le devuelve el posicionamiento absoluto (así sale del flujo y el
   emoji se centra solo) y se deja siempre visible, discreto. En una
   pantalla que se toca, un botón que solo existe al pasar el ratón es un
   botón que no existe.
   ══════════════════════════════════════════════════════════════════════ */
#pedro-ai-app .tq-wb-v2 .tq-wb-item-stamp .tq-wb-item-head {
  display: grid !important;
  /* Una sola columna que ocupe TODO el ancho. Con «place-items:center» a
     secas la columna se encoge al tamaño del emoji y se queda pegada a la
     izquierda —centrar el contenido de una columna no centra la columna—,
     que era exactamente el descuadre de 15px que se veía. */
  grid-template-columns: 1fr !important;
  place-items: center !important;
  place-content: center !important;
  padding: 0 !important;
  gap: 0 !important;
}
#pedro-ai-app .tq-wb-v2 .tq-wb-item-stamp .tq-wb-item-title {
  flex: none !important;
  width: 100% !important;
  text-align: center !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-item-stamp .tq-wb-item-close {
  position: absolute !important;
  top: -10px !important;
  right: -10px !important;
  /* v6.94.0 — Era una chapa BLANCA con borde clarito, encima de una tarjeta
     clara y sobre un lienzo blanco: no se veía. Da igual que estuviera ahí y
     que se pudiera pulsar; si no se ve, no existe. Ahora es oscura con el
     aspa en blanco, que es lo que hace falta para que se distinga sobre
     cualquier fondo de pizarra.

     Y opacidad 1: en una pantalla táctil no hay hover que la revele. */
  opacity: 1 !important;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  background: var(--text) !important;
  border: 2px solid #fff !important;
  box-shadow: 0 3px 10px rgba(15,23,42,.30) !important;
  color: #fff !important;
  font-size: 15px !important;
  transition: background .15s ease, transform .12s ease !important;
}
#pedro-ai-app .tq-wb-v2 .tq-wb-item-stamp .tq-wb-item-close:hover,
#pedro-ai-app .tq-wb-v2 .tq-wb-item-stamp .tq-wb-item-close:focus-visible {
  background: #DC2626 !important;   /* rojo: va a borrar */
  color: #fff !important;
  border-color: #fff !important;
  transform: scale(1.08) !important;
}

/* El cuerpo y las herramientas de un sello no pintan nada: es solo el
   emoji. Se ocultan para que no le roben altura ni descoloquen el centro. */
#pedro-ai-app .tq-wb-v2 .tq-wb-item-stamp .tq-wb-item-body,
#pedro-ai-app .tq-wb-v2 .tq-wb-item-stamp .tq-wb-item-tools {
  display: none !important;
}

/* Y el sello necesita poder sacar el aspa fuera de su borde. */
#pedro-ai-app .tq-wb-v2 .tq-wb-item-stamp {
  overflow: visible !important;
}

/* La instrucción de una tarjeta de acción, ya sin su banda de color.
   v6.92.0 — Lee como un subtítulo, que es lo que es. */
#pedro-ai-app .tq-action-guia{
  margin: 12px 16px 2px;
  font-size: 13px; font-weight: 650; line-height: 1.45;
  color: var(--text-3, #4A4F68);
}

/* ══════════════════════════════════════════════════════════════════════
   v6.93.0 — EL MENÚ «···» DE LA BARRA DE LA PIZARRA

   Los cuatro botones que se usan una vez por clase —abrir, imagen, PDF y
   limpiar— viven aquí dentro. La barra pasa de nueve botones a cinco, y lo
   que queda es lo que el profesor toca cada dos minutos.

   Se mantiene el aspecto de los demás botones: al profesor le gusta cómo se
   ve la pizarra, y esto no va de cambiarla de cara sino de repartir mejor.
   ══════════════════════════════════════════════════════════════════════ */
#pedro-ai-app .tq-wb-mas { position: relative; display: inline-flex; }

#pedro-ai-app .tq-wb-mas-btn .tq-wb-action-icon {
  font-size: 17px; font-weight: 900; letter-spacing: .06em; line-height: 1;
}

/* SIN el prefijo #pedro-ai-app, a propósito.
   v6.94.0 — El menú se cuelga del <body> para que la barra de arriba no lo
   recorte (lleva overflow-y:hidden). Ahí fuera, cualquier regla que empiece
   por #pedro-ai-app deja de alcanzarlo: se quedaba sin dirección de columna,
   sin fondo y sin z-index, y salía como una tira ancha por detrás del carril.
   Estas reglas van sueltas para que le lleguen. */
.tq-wb-mas-menu {
  position: fixed; z-index: 2147482000;
  display: flex; flex-direction: column; gap: 4px;
  min-width: 200px; padding: 7px;
  background: #fff;
  border: 1px solid #E4E6EF;
  border-radius: 15px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .17);
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
/* Un <dialog> cerrado no se pinta; abierto, se pinta en la capa superior. */
.tq-wb-mas-menu:not([open]) { display: none !important; }
.tq-wb-mas-menu[open] { display: flex !important; }
/* Sin el velo del navegador: esto es un menú, no un diálogo bloqueante. */
.tq-wb-mas-menu::backdrop { background: transparent; }

/* Dentro del menú los botones son filas, no pastillas sueltas. */
.tq-wb-mas-menu .tq-wb-action-btn {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  width: 100% !important;
  min-width: 0 !important;
  font-family: inherit !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #141726 !important;
  cursor: pointer !important;
  justify-content: flex-start !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 9px 11px !important;
}
.tq-wb-mas-menu .tq-wb-action-btn:hover {
  background: var(--bg2, var(--bg)) !important;
}
.tq-wb-mas-menu .tq-wb-action-label {
  display: inline !important;   /* en la barra se ocultan; aquí hacen falta */
}
/* Limpiar es el único destructivo: que se note que lo es. */
.tq-wb-mas-menu #tq-wb-clear:hover {
  background: rgba(220, 38, 38, .08) !important;
  color: var(--red, #DC2626) !important;
}

/* Con el panel plegado, una pestaña fina para volver a abrirlo sin ir
   a buscar el botón de arriba: está donde estaba el panel. */
#pedro-ai-app .tq-wb-v3.tq-wb-dock-hidden .tq-wb-v3-canvas-zone { position: relative; }

@media (max-width: 700px) {
  .tq-wb-mas-menu { min-width: 170px; }
}

/* ══════════════════════════════════════════════════════════════════════
   v6.95.0 — LA PIZARRA EN EL MÓVIL

   No está pensada para el móvil, pero se abre desde el móvil, así que al
   menos que se vea bien y se pueda usar. Medido en un iPhone de 375×812
   antes de tocar nada:

     · la pizarra medía 1440px de alto en una pantalla de 812. Había que
       hacer scroll para llegar al lienzo, que empezaba a mitad de pantalla;
     · el carril de dibujo ocupaba 373px él solo, apilado igual que en el
       escritorio pero a lo ancho;
     · 38 botones por debajo de 44px, que es lo mínimo para acertar con el
       dedo sin pelearse.

   Aquí: el carril pasa a ser una tira horizontal que se desplaza, el panel
   de elementos se abre como hoja por encima del lienzo en vez de sumar
   altura, el lienzo se queda con todo lo que sobra, y nada baja de 44px.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 920px) {

  /* Todo cabe en la pantalla: nada de scroll de página. */
  #pedro-ai-app.pedro-whiteboard-mode .tq-whiteboard-shell {
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  /* Tira arriba · lienzo con todo lo demás. El panel ya no es una fila. */
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-workspace,
  #pedro-ai-app .tq-wb-v3-workspace {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  /* ── El carril, en horizontal ── */
  #pedro-ai-app .tq-wb-v3-rail {
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    padding: 0 2px 2px !important;
    min-height: 0 !important;
  }
  #pedro-ai-app .tq-wb-v3-rail::-webkit-scrollbar { display: none !important; }

  #pedro-ai-app .tq-wb-v3-rail-card {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 7px 9px !important;
    margin: 0 !important;
  }
  /* Los rótulos («Dibujar», «Color»…) sobran en una tira estrecha. */
  #pedro-ai-app .tq-wb-v3-rail .tq-wb-v3-rail-label,
  #pedro-ai-app .tq-wb-v3-rail .tq-wb-v3-color-name { display: none !important; }

  /* Las herramientas y los colores, en fila y sin envolverse. */
  #pedro-ai-app .tq-wb-v3-rail .tq-wb-v3-tool-grid,
  #pedro-ai-app .tq-wb-v3-rail .tq-wb-v3-palette-frame,
  #pedro-ai-app .tq-wb-v3-rail .tq-wb-v3-palette {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    grid-template-columns: none !important;
  }

  /* ── El dedo necesita sitio: nada por debajo de 44px ── */
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-tool,
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-action-btn,
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-rail button,
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-topbar button,
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-swatch {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* ── El panel de elementos: hoja por encima, no fila que suma alto ── */
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-dock,
  #pedro-ai-app .tq-wb-v3-dock {
    position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    top: auto !important;
    max-height: 72dvh !important;
    z-index: 90 !important;
    margin: 0 !important;
    border-radius: 22px 22px 0 0 !important;
    box-shadow: 0 -18px 44px rgba(15, 23, 42, .22) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: max(14px, env(safe-area-inset-bottom)) !important;
  }
  /* Un asa arriba, para que se lea como hoja que se puede cerrar. */
  #pedro-ai-app .tq-wb-v3-dock::before {
    content: '';
    display: block; width: 40px; height: 4px; flex: 0 0 auto;
    margin: 2px auto 10px;
    border-radius: 999px; background: rgba(15, 23, 42, .18);
  }

  /* ── La barra de arriba, compacta ── */
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-classroom-head { display: none !important; }
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-topbar {
    padding: 6px 8px !important;
    gap: 6px !important;
  }
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-topbar .tq-wb-action-label {
    display: none !important;   /* solo iconos: no cabe más */
  }
  /* Menos «Guardar», que conviene que se lea. */
  #pedro-ai-app.pedro-whiteboard-mode #tq-wb-save .tq-wb-action-label {
    display: inline !important;
  }

  /* El menú «···», a lo ancho y con letra legible. */
  .tq-wb-mas-menu { min-width: min(240px, calc(100vw - 24px)) !important; }
  .tq-wb-mas-menu .tq-wb-action-btn { min-height: 46px !important; }
}

/* Móvil de verdad: el lienzo manda todavía más. */
@media (max-width: 700px) {
  #pedro-ai-app.pedro-whiteboard-mode .tq-wb-v3-rail-card.tq-wb-v3-zoom-card {
    display: none !important;   /* se hace zoom con dos dedos */
  }
  #pedro-ai-app.pedro-whiteboard-mode .tq-whiteboard-empty {
    padding: 18px !important;
  }
  #pedro-ai-app.pedro-whiteboard-mode .tq-whiteboard-empty h3 { font-size: 21px !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   v6.97.0 — EL ASPA DEL SELLO, DENTRO DEL SELLO

   Tercer intento, y el último, porque el enfoque estaba mal.

   Se puso como chapa asomando por la esquina (top:-10, right:-10). Eso
   depende de que NADIE recorte por encima, y en la pizarra hay varios
   contenedores con overflow:auto y una guerra de reglas con !important
   que no se puede ganar a base de especificidad. El profesor lo dijo tres
   veces: «el botón de cerrar sigue estando escondido».

   Así que deja de asomar: va DENTRO del sello, arriba a la derecha. Ahí
   no hay recorte posible porque no sale de su caja. Se pierde un poco de
   gracia visual y se gana que exista.

   Va al final del archivo a propósito: a igualdad de especificidad manda
   la última, y así no hay que pelear con nada.

   Y esta vez está MEDIDO, no deducido: la pizarra montada en un navegador
   con este mismo archivo y el marcado de templates/panels/whiteboard.php,
   cuatro sellos en las esquinas y en el centro del lienzo, a 1280×800 y a
   375×812. En los ocho casos el aspa sale de 28×28, con opacidad 1, sin
   que ningún antepasado le recorte un solo píxel, y el clic en su centro
   le llega a ella. Las dos veces anteriores el fallo fue darlo por bueno
   leyendo el CSS.
   ══════════════════════════════════════════════════════════════════════ */
#pedro-ai-app .tq-wb-v2 .tq-wb-item-stamp,
#pedro-ai-app .tq-wb-item-stamp {
  position: relative !important;
  overflow: visible !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-item-stamp .tq-wb-item-close,
#pedro-ai-app .tq-wb-item-stamp .tq-wb-item-close {
  position: absolute !important;
  /* DENTRO de la caja: nada la puede recortar. */
  top: 5px !important;
  right: 5px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 5 !important;

  display: grid !important;
  place-items: center !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  margin: 0 !important;

  opacity: 1 !important;          /* en una pizarra táctil no hay hover */
  visibility: visible !important;
  pointer-events: auto !important;

  border: 2px solid #FFFFFF !important;
  border-radius: 999px !important;
  background: var(--text) !important;  /* 14,7:1 contra el blanco del aspa */
  color: #FFFFFF !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  box-shadow: 0 2px 8px rgba(15,23,42,.35) !important;
  cursor: pointer !important;
  transition: background .15s ease, transform .12s ease !important;
}

#pedro-ai-app .tq-wb-v2 .tq-wb-item-stamp .tq-wb-item-close:hover,
#pedro-ai-app .tq-wb-item-stamp .tq-wb-item-close:hover,
#pedro-ai-app .tq-wb-v2 .tq-wb-item-stamp .tq-wb-item-close:focus-visible {
  background: #DC2626 !important;   /* rojo: va a borrar */
  transform: scale(1.08) !important;
}

/* Y el emoji, con hueco para que el aspa no se le monte encima. */
#pedro-ai-app .tq-wb-v2 .tq-wb-item-stamp .tq-wb-item-head {
  padding: 6px !important;
}

/* ══════════════════════════════════════════════════════════════════════
   v6.108.0 — EL TABLÓN CON IMÁGENES Y RECURSOS (lado del profesor)

   El compositor pasa de una caja de texto a tres cosas: escribir, subir
   una imagen y pegar un recurso. Y el tablón del profesor enseña lo mismo
   que va a ver el alumno — mandar un vídeo a una clase sin verlo antes es
   pedir que te lo diga un crío.
   ══════════════════════════════════════════════════════════════════════ */
#pedro-ai-app .tq-board-tools{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;
}
#pedro-ai-app .tq-board-tool{
  display:inline-flex;align-items:center;gap:6px;
  min-height:38px;padding:8px 13px;
  border:1px solid var(--border);border-radius:12px;background:#fff;
  color:var(--text-2);font-size:12.5px;font-weight:700;cursor:pointer;
  transition:border-color .16s ease,background .16s ease,transform .12s ease;
}
#pedro-ai-app .tq-board-tool:hover{
  border-color:rgba(108,92,231,.35);background:#F7F6FE;transform:translateY(-1px);
}
#pedro-ai-app .tq-board-tools .pedro-btn-primary{margin-left:auto}

/* La caja del enlace, que solo aparece al pedirla. */
#pedro-ai-app .tq-board-linkbox{margin-top:8px;display:grid;gap:6px}
#pedro-ai-app .tq-board-linkbox[hidden]{display:none!important}
#pedro-ai-app .tq-board-linkbox input[type=url]{
  width:100%;min-height:42px;padding:10px 13px;
  border:1px solid var(--border);border-radius:12px;background:#fff;
  font-size:13.5px;font-weight:600;color:var(--text);
}
#pedro-ai-app .tq-board-linkbox input[type=url]:focus{
  outline:none;border-color:#6C5CE7;box-shadow:0 0 0 3px rgba(108,92,231,.13);
}
#pedro-ai-app .tq-board-link-info{font-size:12px;font-weight:650;line-height:1.4}
#pedro-ai-app .tq-board-link-ok{color:#047857}
#pedro-ai-app .tq-board-link-warn{color:#B45309}
#pedro-ai-app .tq-board-link-wait{color:var(--text-3)}

/* ══════════════════════════════════════════════════════════════════════
   v6.111.0 — LAS PLATAFORMAS QUE SE VEN DENTRO

   El profesor no puede adivinar qué se incrusta y qué no. Va plegado
   (<details>) porque son veinte y desplegado se comería el compositor,
   pero está SIEMPRE ahí, debajo del campo, en el momento exacto en que
   hace falta — no en una ayuda aparte que nadie abre.
   ══════════════════════════════════════════════════════════════════════ */
#pedro-ai-app .tq-plats{
  border:1px solid var(--border);border-radius:12px;background:var(--bg);overflow:hidden;
}
#pedro-ai-app .tq-plats summary{
  cursor:pointer;list-style:none;padding:9px 12px;
  font-size:12px;font-weight:700;color:var(--text-2);
}
#pedro-ai-app .tq-plats summary::-webkit-details-marker{display:none}
#pedro-ai-app .tq-plats summary:hover{background:#F2F0FE;color:#5546D6}
#pedro-ai-app .tq-plats[open] summary{border-bottom:1px solid var(--border)}
#pedro-ai-app .tq-plats-cuerpo{padding:11px 12px 12px;display:grid;gap:10px}
#pedro-ai-app .tq-plat-grupo{display:grid;gap:5px}
#pedro-ai-app .tq-plat-grupo b{
  font-size:9.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--text-4);
}
#pedro-ai-app .tq-plat-fila{display:flex;flex-wrap:wrap;gap:5px}
#pedro-ai-app .tq-plat{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 9px;border-radius:999px;background:#fff;border:1px solid var(--border);
  font-size:11.5px;font-weight:650;color:var(--text-2);white-space:nowrap;
}
#pedro-ai-app .tq-plat i{font-style:normal;font-size:12.5px;line-height:1}
#pedro-ai-app .tq-plats-nota{
  margin:2px 0 0;font-size:11.5px;font-weight:500;line-height:1.5;color:var(--text-3);
}

/* ══════════════════════════════════════════════════════════════════════
   v6.111.0 — CÓMO HA CAÍDO EL RECADO

   Reacciones y comentarios en la pantalla del profesor. Aquí no se pulsa
   nada: es un termómetro, no un tablón de conversación. Lo único que se
   toca es el aspa para quitar un comentario que no procede.
   ══════════════════════════════════════════════════════════════════════ */
#pedro-ai-app .tq-board-reacs{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
#pedro-ai-app .tq-board-reac{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 9px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);
  font-size:12px;font-weight:700;color:var(--text-2);line-height:1.5;
}
/* La duda va en ámbar: cuatro alumnos que no lo entienden es una clase que
   hay que repetir, y eso no puede parecer un «me gusta» más. */
#pedro-ai-app .tq-board-reac.es-duda{
  background:#FFFBEB;border-color:#FDE68A;color:#B45309;
}

#pedro-ai-app .tq-board-hilo{
  margin-top:9px;padding-top:9px;border-top:1px dashed var(--border);display:grid;gap:6px;
}
#pedro-ai-app .tq-board-hilo-cab{
  font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--text-4);
}
#pedro-ai-app .tq-board-coment{
  position:relative;padding:7px 30px 7px 10px;border-radius:10px;
  background:var(--bg);border-left:2px solid var(--border-2);
}
#pedro-ai-app .tq-board-coment.es-profe{background:#F2F0FE;border-left-color:#6C5CE7}
#pedro-ai-app .tq-board-coment b{font-size:11.5px;font-weight:750;color:var(--text)}
#pedro-ai-app .tq-board-coment span{margin-left:7px;font-size:10.5px;font-weight:450;color:var(--text-4)}
#pedro-ai-app .tq-board-coment p{
  margin:2px 0 0;font-size:12.5px;font-weight:500;line-height:1.5;color:var(--text-2);
}
#pedro-ai-app .tq-board-coment-x{
  position:absolute;top:5px;right:5px;
  width:22px;height:22px;display:grid;place-items:center;
  border:0;border-radius:6px;background:none;color:var(--text-4);
  font-size:15px;line-height:1;cursor:pointer;
}
#pedro-ai-app .tq-board-coment-x:hover{background:#FEF3F3;color:#DC2626}

/* Lo que va enganchado al recado antes de publicarlo. */
#pedro-ai-app .tq-board-adj{
  display:flex;align-items:center;gap:11px;margin-top:9px;padding:9px 11px;
  border:1px solid var(--border);border-radius:13px;background:var(--bg);
}
#pedro-ai-app .tq-board-adj img{
  width:46px;height:46px;object-fit:cover;border-radius:10px;flex:0 0 46px;display:block;
}
#pedro-ai-app .tq-board-adj-ico{
  width:46px;height:46px;flex:0 0 46px;display:grid;place-items:center;
  border-radius:10px;background:#F2F0FE;font-size:20px;
}
#pedro-ai-app .tq-board-adj-copy{min-width:0;flex:1}
#pedro-ai-app .tq-board-adj-copy strong{
  display:block;font-size:13px;font-weight:750;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#pedro-ai-app .tq-board-adj-copy small{display:block;font-size:11px;color:var(--text-3);margin-top:1px}
#pedro-ai-app .tq-board-adj-x{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  border:1px solid var(--border);background:#fff;color:var(--text-3);
  font-size:16px;line-height:1;cursor:pointer;
}
#pedro-ai-app .tq-board-adj-x:hover{background:#FEF2F2;border-color:#FECACA;color:#B91C1C}

/* Y lo ya publicado, tal como lo verá el alumno. */
#pedro-ai-app .tq-board-foto{display:block;margin-top:9px;border-radius:12px;overflow:hidden;line-height:0}
#pedro-ai-app .tq-board-foto img{width:100%;height:auto;max-height:280px;object-fit:contain;background:var(--surface-2);display:block}
#pedro-ai-app .tq-board-embed{
  position:relative;margin-top:9px;border-radius:12px;overflow:hidden;
  background:#171233;aspect-ratio:16/9;
}
#pedro-ai-app .tq-board-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
#pedro-ai-app .tq-board-enlace{
  display:inline-block;margin-top:8px;font-size:12.5px;font-weight:700;
  color:#5546D6;text-decoration:none;word-break:break-all;
}
#pedro-ai-app .tq-board-enlace:hover{text-decoration:underline}

/* ══════════════════════════════════════════════════════════════════════
   v6.112.0 — EL PANEL DEL PROFESOR, MIRADO CON UN MEDIDOR

   Todo lo de aquí abajo sale de medir la pantalla en un navegador, no de
   opinar. Los números están en cada regla.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. La barra lateral se podía leer poco y mal ──────────────────────
   El subtítulo de la marca daba 1.81:1 de contraste sobre el morado. El
   mínimo para texto normal es 4.5:1, así que no es que se leyera regular:
   es que no se leía. Llevaba dos atenuaciones encima —color al 56% de
   blanco Y opacity .6— que multiplicadas dejaban el texto casi en el
   fondo. Se quita la segunda y se sube la primera. */
#pedro-ai-app .pedro-wow-brand-subtitle{
  color: rgba(255,255,255,.92);
  opacity: 1;
}
/* Los rótulos de sección iban al 42% de blanco: mismo problema, más leve.
   Suben lo justo para leerse sin competir con los nombres de las
   herramientas, que son lo que de verdad se busca ahí. */
#pedro-ai-app .pedro-wow-nav-group-title{
  color: rgba(255,255,255,.84);
}

/* ── 2. Un rótulo que se disfrazaba de insignia ────────────────────────
   «HERRAMIENTAS» compartía estilo con la insignia de marca «TEACHER
   STUDIO»: píldora, borde y fondo. Los otros tres rótulos de sección
   —GENERAL, MATERIALES, AULA— son texto pelado. Cuatro rótulos que hacen
   lo mismo y uno vestido de otra cosa: el ojo lo lee como si fuera un
   botón, y no lo es. Ahora los cuatro son iguales. */
#pedro-ai-app .pedro-wow-nav-label{
  display: block;
  padding: 0 8px 4px;
  background: none;
  border: 0;
  border-radius: 0;
  color: rgba(255,255,255,.84);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
}

/* ── 3. El medidor del plan medía 141px ────────────────────────────────
   Ciento cuarenta y un píxeles de lo más alto del panel, todos los días,
   para decir «7 de 15». Es información de estado, no es la tarea. Las dos
   barras pasan a ir en línea y la nota explicativa se queda —no se
   esconde nada—, pero sin ocupar tres renglones. */
#pedro-ai-app .tq-plan-card{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 22px;
  padding: 11px 16px;
}
#pedro-ai-app .tq-plan-head{ margin: 0; flex: 0 0 auto; gap: 10px; }
#pedro-ai-app .tq-plan-row{
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  flex: 0 1 auto;
}
#pedro-ai-app .tq-plan-row .tq-plan-bar{ width: 84px; flex: 0 0 84px; }
#pedro-ai-app .tq-plan-lbl{ font-size: 11.5px; white-space: nowrap; }
#pedro-ai-app .tq-plan-note{
  flex: 1 1 100%;
  margin: 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-3);
}
/* La invitación a pasarse al plan completo se va a la derecha del todo,
   que es donde se busca, y deja de ir pegada a la etiqueta del plan. */
#pedro-ai-app .tq-plan-up{ margin-left: auto; }

/* ── 4. Un hueco vacío no puede ser lo más llamativo de la pantalla ────
   La tarjeta de curiosidad cultural mide 300px y, MIENTRAS CARGA, va en
   naranja saturado a todo color. O sea: lo que más grita en la pantalla
   de inicio es una caja que todavía no tiene nada dentro. Cuando llega el
   contenido, el naranja se gana; mientras no hay nada, se calla. */
#pedro-ai-app .tq-home-culture.is-loading{
  background: var(--surface);
  border: 1px dashed var(--border-2);
  box-shadow: none;
  color: var(--text-3);
}
#pedro-ai-app .tq-home-culture.is-loading *{ color: var(--text-3) !important; }
/* Y un latido suave, para que se note que está trabajando y no roto. */
#pedro-ai-app .tq-home-culture.is-loading{ animation: tqLatido 1.9s ease-in-out infinite; }
@keyframes tqLatido{ 0%,100%{ opacity:.72 } 50%{ opacity:1 } }
@media (prefers-reduced-motion: reduce){
  #pedro-ai-app .tq-home-culture.is-loading{ animation: none; }
}


/* v6.113.0 — Las acciones sin vuelta atrás, juntas y a la derecha. */
#pedro-ai-app .tq-cls-peligro { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }

/* ══════════════════════════════════════════════════════════════════════
   v6.115.0 — EL TABLÓN DEL PROFESOR, A LA ALTURA DEL DEL ALUMNO

   Medido: un recado con vídeo ocupaba 858px de alto. El iframe respeta su
   16/9, pero la columna del panel es mucho más ancha que la del aula
   —1052px frente a ~690—, así que el mismo 16/9 daba 592px de vídeo. Un
   solo recado llenaba la pantalla y el profesor no veía su tablón.

   Y el fondo del asunto: esta pantalla es para MODERAR, no para ver el
   vídeo. El profesor necesita repasar veinte recados de un vistazo y
   comprobar que el que puso es el que quería. Para eso basta un preview.
   ══════════════════════════════════════════════════════════════════════ */
#pedro-ai-app .tq-board-embed{ max-width: 440px; }
#pedro-ai-app .tq-board-foto{ display:block; max-width: 440px; }
#pedro-ai-app .tq-board-foto img{ width:100%; height:auto; border-radius:12px; display:block; }

/* ── La cara de quien firma, igual que en el aula ────────────────────── */
#pedro-ai-app .tq-board-av{
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  font-size: 12.5px; font-weight: 800; line-height: 1;
  box-shadow: 0 1px 3px rgba(23,18,51,.18);
}
#pedro-ai-app .tq-board-msg-top{ gap: 10px; margin-bottom: 7px; }
#pedro-ai-app .tq-board-msg-top b{ font-size: 13.5px; }
/* La hora se aparta a la derecha.
   La primera versión de esto decía `span:not(.tq-board-vistos)` — y el
   avatar TAMBIÉN es un span, así que se lo llevaba él y la cabecera salía
   empujada a la derecha. Es palabra por palabra el mismo fallo que
   `.recado-top span` en el aula, cometido cuatro días después de
   arreglarlo allí. La lección, otra vez: la regla tiene que nombrar la
   cosa que quiere mover, no la etiqueta con la que está escrita. */
#pedro-ai-app .tq-board-cuando{
  margin-left: auto; font-size: 11.5px; font-weight: 450; color: var(--text-4);
}
#pedro-ai-app .tq-board-msg p{ font-size: 14.5px; line-height: 1.6; }

/* El comentario también lleva su cara, más pequeña. */
#pedro-ai-app .tq-board-coment{ padding-left: 10px; }
#pedro-ai-app .tq-board-coment .tq-board-av{
  width: 22px; height: 22px; font-size: 10px; vertical-align: -6px; margin-right: 6px;
  display: inline-grid;
}

/* ── El compositor ───────────────────────────────────────────────────
   Los botones se iban todos a la derecha y dejaban un vacío enorme bajo
   el texto. Lo de adjuntar va a la izquierda —es lo que se hace antes— y
   «Publicar» al final, que es lo último. */
#pedro-ai-app .tq-board-tools{
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 9px;
}
#pedro-ai-app .tq-board-tools #tq-board-send{ margin-left: auto; }

/* Los dos permisos, juntos: son la misma decisión en dos mitades. */
#pedro-ai-app .tq-cls-block-head{ gap: 10px; flex-wrap: wrap; }
#pedro-ai-app .tq-cls-block-head .tq-board-switch + .tq-board-switch{ margin-left: 0; }
#pedro-ai-app .tq-cls-block-head h4 + .tq-board-switch{ margin-left: auto; }

/* v6.115.0 — Dentro de una clase, la bienvenida sobra.
   Cuatro renglones explicando cómo crear una clase, encima de la clase que
   ya has abierto. En el escritorio son dos líneas de ruido; en el móvil son
   cuatro y empujan la ficha media pantalla hacia abajo. */
#pedro-ai-app #pedro-classes-panel.tq-en-ficha .pedro-ai-panel-header{ display: none; }

/* ══════════════════════════════════════════════════════════════════════
   v6.115.0 — LA LISTA DE ALUMNOS

   Quince renglones idénticos con nombre y fecha de alta. La pregunta que
   trae a un profesor a esta lista no es «¿cuándo entró?» sino «¿quién está
   usando esto y quién no?». Ahora responde a esa.
   ══════════════════════════════════════════════════════════════════════ */
#pedro-ai-app .tq-cls-member{ gap: 10px; }
#pedro-ai-app .tq-cls-member .tq-board-av{ width: 26px; height: 26px; font-size: 11px; }
#pedro-ai-app .tq-cls-member-alias{ font-size: 14px; }
/* Quien lleva una semana o más sin aparecer se apaga un poco y su «hace X
   días» va en ámbar: es el único de la lista sobre el que hay algo que
   hacer. Apagar la fila entera lo escondería; apagarla un poco lo destaca
   justamente por contraste con las demás. */
#pedro-ai-app .tq-cls-member.es-frio .tq-cls-member-date{ color: var(--amber); font-weight: 700; }
#pedro-ai-app .tq-cls-member.es-frio .tq-board-av{ filter: saturate(.35); }

/* ══════════════════════════════════════════════════════════════════════
   v6.119.0 — FIJAR, CORREGIR Y SABER QUIÉN FALTA
   ══════════════════════════════════════════════════════════════════════ */
#pedro-ai-app .tq-board-msg.es-fijado{
  border-left: 3px solid #E0A800;
  box-shadow: 0 6px 20px rgba(224,168,0,.12);
}
#pedro-ai-app .tq-board-chapa{
  display: inline-flex; align-items: center; gap: 5px; margin-bottom: 8px;
  padding: 3px 10px; border-radius: 999px;
  background: #FFF8E1; border: 1px solid #FFE082; color: #8A6100;
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
#pedro-ai-app .tq-board-editado{ font-size: 11.5px; font-weight: 600; color: var(--text-4); }
/* v6.123.0 — La mención dentro de un comentario. Color y peso, sin fondo: con
   fondo se leería como un botón y el profesor intentaría pulsarla. Es el
   mismo trato que recibe en el aula, para que un hilo se vea igual en las dos
   pantallas. */
#pedro-ai-app .tq-board-men{ color: var(--brand); font-weight: 700; }
/* v6.131.0 — Quién se ha atascado en un material. En ámbar y separado de
   «les falta por hacerlo»: no haberlo hecho y haberlo intentado sin éxito son
   dos cosas distintas, y mezclarlas en una sola lista pierde la única que
   pide algo del profesor. */
#pedro-ai-app .tq-cls-atasco{
  display: block; margin-top: 10px; padding-top: 9px;
  border-top: 1px solid var(--border); color: #B45309;
}
/* ── v6.146.0 · Empezaron y lo dejaron, y el muro ───────────────────────
   Tres bloques en la misma caja, y cada uno tiene que decir una cosa
   distinta de un vistazo. El de «a medias» va en el índigo de la marca —es
   información, no una alarma— y el muro en rojo, porque es lo único que
   señala al material y no a un alumno. */
#pedro-ai-app .tq-cls-medias{
  display: block; margin-top: 10px; padding-top: 9px;
  border-top: 1px solid var(--border); color: #4B39C0;
}
/* El paso, dentro de la lista de nombres: se lee como un dato del alumno,
   no como otro nombre, así que va más pequeño y sin cursiva de adorno. */
#pedro-ai-app .tq-cls-quien .tq-cls-medias + span em{
  font-style: normal; font-size: 11.5px; font-weight: 700; color: #4B39C0;
}
#pedro-ai-app .tq-cls-muro{
  display: block; margin-top: 10px; padding-top: 9px;
  border-top: 1px solid var(--border); color: #B02A37;
}
#pedro-ai-app .tq-board-coment .tq-board-editado{ font-style: italic; font-weight: 500; }

/* Los tres botones del recado, del mismo tamaño y sin gritar. El aspa ya
   lleva `margin-left:auto`, así que basta con ponerlos delante. */
#pedro-ai-app .tq-board-pin,
#pedro-ai-app .tq-board-edit{
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); background: #fff;
  font-size: 12px; line-height: 1; opacity: .55; transition: all .15s;
}
#pedro-ai-app .tq-board-pin:hover,
#pedro-ai-app .tq-board-edit:hover{ opacity: 1; border-color: var(--brand-bdr); }
#pedro-ai-app .tq-board-pin.on{
  opacity: 1; background: #FFF8E1; border-color: #FFE082;
}
/* El de fijar se pega al aspa; el margen automático lo lleva el primero de
   los tres, no el aspa suelta. */
#pedro-ai-app .tq-board-pin{ margin-left: auto; }
#pedro-ai-app .tq-board-x{ margin-left: 0; }

/* El contador de vistos pasa a ser un botón: tiene que parecerlo. */
#pedro-ai-app button.tq-board-vistos{
  cursor: pointer; transition: all .15s;
}
#pedro-ai-app button.tq-board-vistos:hover{
  border-color: var(--brand-bdr); color: var(--brand-d); background: var(--brand-soft);
}
#pedro-ai-app .tq-board-faltan{
  margin-top: 9px; padding: 9px 11px; border-radius: 10px;
  background: #FFFBEB; border: 1px solid #FDE68A;
  font-size: 12.5px; line-height: 1.55; color: #92400E;
}
#pedro-ai-app .tq-board-faltan b{ display: block; margin-bottom: 3px; font-weight: 800; }
#pedro-ai-app .tq-board-faltan span{ color: #B45309; font-weight: 600; }

/* v6.120.0 — Quién ha hecho cada material. */
#pedro-ai-app .tq-cls-progreso{
  flex: 0 0 auto; padding: 3px 9px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: #fff; color: var(--text-3);
  font-family: var(--font); font-size: 11.5px; font-weight: 750; transition: all .15s;
}
#pedro-ai-app .tq-cls-progreso:hover{
  border-color: var(--brand-bdr); background: var(--brand-soft); color: var(--brand-d);
}
#pedro-ai-app .tq-cls-quien{
  margin: -2px 0 6px; padding: 9px 12px; border-radius: 0 0 12px 12px;
  background: #FFFBEB; border: 1px solid #FDE68A; border-top: 0;
  font-size: 12.5px; line-height: 1.55; color: #92400E;
}
#pedro-ai-app .tq-cls-quien.es-completo{
  background: #F1FDF5; border-color: #BBF7D0; color: #15803D;
}
#pedro-ai-app .tq-cls-quien b{ display: block; margin-bottom: 3px; font-weight: 800; }
#pedro-ai-app .tq-cls-quien span{ font-weight: 600; opacity: .9; }

/* ═══════════════════════════════════════════════════════════════════
   v6.171.0 — LO QUE HAN CONTESTADO A LA LECTURA

   El «💬 7» era un <span> sin estilo y sin nada detrás. Ahora es un
   botón —se ve que se puede pulsar— y debajo se despliega lo escrito.
   ═══════════════════════════════════════════════════════════════════ */
#pedro-ai-app .tq-cls-reading-responses{
  flex: 0 0 auto; height: 28px; padding: 0 10px; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--brand-bdr, #DDD6FE); background: var(--brand-soft, #F5F3FF);
  color: var(--brand-d, #5B21B6); font: inherit; font-size: 12px; font-weight: 750;
}
#pedro-ai-app .tq-cls-reading-responses:hover{ background: var(--brand-bdr, #DDD6FE); }
#pedro-ai-app .tq-cls-reading-responses:disabled{ opacity: .55; cursor: progress; }
#pedro-ai-app .tq-cls-lect{
  margin: -2px 0 6px; padding: 11px 13px; border-radius: 0 0 12px 12px;
  background: #F8FAFC; border: 1px solid #E2E8F0; border-top: 0;
  font-size: 12.5px; line-height: 1.55; color: #334155;
}
#pedro-ai-app .tq-cls-lect > b{ display: block; font-weight: 800; color: #0F172A; }
#pedro-ai-app .tq-cls-lect > span{ font-weight: 600; opacity: .85; }
#pedro-ai-app .tq-lect-cab{
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 9px; padding-bottom: 8px; border-bottom: 1px solid #E2E8F0;
}
#pedro-ai-app .tq-lect-cab > b{ font-weight: 800; color: #0F172A; }
#pedro-ai-app .tq-lect-modo{ margin-left: auto; display: flex; gap: 5px; }
#pedro-ai-app .tq-lect-modo button{
  height: 26px; padding: 0 11px; border-radius: 99px; cursor: pointer;
  border: 1px solid #CBD5E1; background: #fff; color: #475569;
  font: inherit; font-size: 11.5px; font-weight: 700;
}
#pedro-ai-app .tq-lect-modo button.es-activo{
  border-color: var(--brand-bdr, #DDD6FE); background: var(--brand-soft, #F5F3FF);
  color: var(--brand-d, #5B21B6);
}
#pedro-ai-app .tq-lect-bloque{
  padding: 9px 11px; margin-bottom: 8px; border-radius: 10px;
  background: #fff; border: 1px solid #E2E8F0;
}
#pedro-ai-app .tq-lect-bloque:last-child{ margin-bottom: 0; }
#pedro-ai-app .tq-lect-quien{
  display: block; margin-bottom: 6px; font-weight: 800; color: #0F172A;
}
#pedro-ai-app .tq-lect-par{ margin-bottom: 7px; }
#pedro-ai-app .tq-lect-par:last-child{ margin-bottom: 0; }
#pedro-ai-app .tq-lect-p{
  display: block; font-weight: 700; color: #64748B; font-size: 11.5px; line-height: 1.45;
}
/* Lo que ha escrito el alumno se lee más grande que la pregunta: es lo
   que el profesor viene a leer. Y se respetan sus saltos de línea. */
#pedro-ai-app .tq-lect-r{
  display: block; margin-top: 2px; white-space: pre-wrap; word-break: break-word;
  font-weight: 650; color: #0F172A; font-size: 13px; line-height: 1.5;
}
#pedro-ai-app .tq-lect-r.es-vacia{ color: #64748B; }
#pedro-ai-app .tq-lect-nada{ font-style: italic; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════
   v6.172.0 — LA BANDEJA DE «POR REVISAR»

   Cada ficha es una tarjeta con lo que escribió el alumno arriba y la
   respuesta del profesor abajo, en ese orden: primero se lee, después
   se contesta.

   Lo ya revisado no se va de la pantalla: se apaga. Ver desaparecer lo
   que acabas de corregir da la sensación de haber perdido algo, y deja
   sin forma de corregir la corrección.
   ═══════════════════════════════════════════════════════════════════ */
#pedro-ai-app .tq-bnd{
  padding: 13px 14px; margin-bottom: 10px; border-radius: 12px;
  background: #fff; border: 1px solid #E2E8F0; border-left: 3px solid var(--brand, #6C5CE7);
}
#pedro-ai-app .tq-bnd:last-child{ margin-bottom: 0; }
#pedro-ai-app .tq-bnd.es-hecho{ border-left-color: #16A34A; background: #FCFDFC; opacity: .72; }
#pedro-ai-app .tq-bnd-cab{
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 9px;
}
#pedro-ai-app .tq-bnd-cab > b{ font-size: 14px; font-weight: 800; color: #0F172A; }
#pedro-ai-app .tq-bnd-mat{ font-size: 12px; font-weight: 700; color: #475569; }
#pedro-ai-app .tq-bnd-cuando{ font-size: 11.5px; font-weight: 600; color: #64748B; }
#pedro-ai-app .tq-bnd-marca{
  margin-left: auto; font-size: 11px; font-weight: 800; color: #15803D;
  background: #F0FDF4; border: 1px solid #BBF7D0; border-radius: 99px; padding: 2px 9px;
}
#pedro-ai-app .tq-bnd-q{ margin-bottom: 7px; }
#pedro-ai-app .tq-bnd-q:last-child{ margin-bottom: 0; }
#pedro-ai-app .tq-bnd-p{
  display: block; font-size: 11.5px; font-weight: 700; color: #64748B; line-height: 1.45;
}
/* Lo que escribió el alumno se lee más grande que la pregunta: es lo que
   el profesor viene a leer. Y se respetan sus saltos de línea. */
#pedro-ai-app .tq-bnd-r{
  display: block; margin-top: 2px; white-space: pre-wrap; word-break: break-word;
  font-size: 13.5px; font-weight: 650; color: #0F172A; line-height: 1.5;
}
#pedro-ai-app .tq-bnd-r.es-vacia{ color: #64748B; font-weight: 600; }
#pedro-ai-app .tq-bnd-pie{ margin-top: 11px; padding-top: 10px; border-top: 1px dashed #E2E8F0; }
#pedro-ai-app .tq-bnd-nota{
  width: 100%; box-sizing: border-box; padding: 9px 11px; border-radius: 10px; resize: vertical;
  border: 1px solid #CBD5E1; background: #fff; color: #0F172A;
  font: inherit; font-size: 13px; font-weight: 600; line-height: 1.5;
}
#pedro-ai-app .tq-bnd-nota:focus{
  outline: 0; border-color: var(--brand, #6C5CE7); box-shadow: 0 0 0 3px var(--brand-soft, #F5F3FF);
}
#pedro-ai-app .tq-bnd-acc{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
#pedro-ai-app .tq-bnd-ok{
  flex: 0 0 auto; height: 34px; padding: 0 15px; border-radius: 99px; border: 0; cursor: pointer;
  background: var(--brand, #6C5CE7); color: #fff; font: inherit; font-size: 12.5px; font-weight: 750;
}
#pedro-ai-app .tq-bnd-ok:hover{ background: var(--brand-d, #5B21B6); }
#pedro-ai-app .tq-bnd-ok:disabled{ opacity: .6; cursor: progress; }
#pedro-ai-app .tq-bnd-vista{ font-size: 11.5px; font-weight: 700; color: #64748B; }
#pedro-ai-app .tq-bnd-estado{ font-size: 12px; font-weight: 750; color: #64748B; }
#pedro-ai-app .tq-bnd-estado.es-bueno{ color: #15803D; }
#pedro-ai-app .tq-bnd-estado.es-malo{ color: #B91C1C; }

/* ═══════════════════════════════════════════════════════════════════
   v6.172.0 — EL INFORME DE UN ALUMNO

   Una hoja, blanca, con márgenes de papel. Se lee en pantalla y se
   imprime con la impresora del navegador: al imprimir, la regla de
   abajo esconde TODO lo demás de la página y deja solo la hoja, sin
   panel, sin menús y sin el botón de imprimir dentro del papel.
   ═══════════════════════════════════════════════════════════════════ */
#pedro-ai-app .tq-pts-informe{
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  border: 1px solid #E2E8F0; background: #fff; font-size: 14px; line-height: 1;
}
#pedro-ai-app .tq-pts-informe:hover{ border-color: var(--brand-bdr, #DDD6FE); background: var(--brand-soft, #F5F3FF); }
#pedro-ai-app .tq-pts-informe:disabled{ opacity: .5; cursor: progress; }
#pedro-ai-app .tq-inf-ov{
  position: fixed; inset: 0; z-index: 9999; display: flex; align-items: flex-start;
  justify-content: center; padding: 24px 16px; overflow: auto; background: rgba(15,23,42,.55);
}
#pedro-ai-app .tq-inf{ width: 100%; max-width: 760px; }
#pedro-ai-app .tq-inf-barra{ display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 10px; }
#pedro-ai-app .tq-inf-print{
  height: 34px; padding: 0 15px; border-radius: 99px; border: 0; cursor: pointer;
  background: var(--brand, #6C5CE7); color: #fff; font: inherit; font-size: 12.5px; font-weight: 750;
}
#pedro-ai-app .tq-inf-cerrar{
  width: 34px; height: 34px; border-radius: 99px; border: 0; cursor: pointer;
  background: #fff; color: #334155; font-size: 20px; line-height: 1;
}
#pedro-ai-app .tq-inf-hoja{
  background: #fff; color: #0F172A; border-radius: 14px; padding: 34px 38px;
  font-size: 13.5px; line-height: 1.6;
}
#pedro-ai-app .tq-inf-cab{ padding-bottom: 14px; margin-bottom: 18px; border-bottom: 2px solid #0F172A; }
#pedro-ai-app .tq-inf-cab h2{ margin: 0; font-size: 26px; font-weight: 850; }
#pedro-ai-app .tq-inf-cab p{ margin: 4px 0 0; font-size: 13px; font-weight: 650; color: #475569; }
#pedro-ai-app .tq-inf-cifras{ display: flex; gap: 26px; flex-wrap: wrap; margin-bottom: 22px; }
#pedro-ai-app .tq-inf-cifras b{ display: block; font-size: 27px; font-weight: 850; line-height: 1.1; }
#pedro-ai-app .tq-inf-cifras span{ font-size: 11.5px; font-weight: 700; color: #475569; }
#pedro-ai-app .tq-inf-sec{ margin-bottom: 20px; }
#pedro-ai-app .tq-inf-sec h3{
  margin: 0 0 7px; font-size: 12px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: #475569;
}
#pedro-ai-app .tq-inf-sec ul{ margin: 0; padding-left: 20px; }
#pedro-ai-app .tq-inf-sec li{ margin-bottom: 3px; }
#pedro-ai-app .tq-inf-nada{ margin: 0; color: #64748B; font-style: italic; }
#pedro-ai-app .tq-inf-grande{ margin: 0; font-size: 27px; font-weight: 850; line-height: 1.1; }
#pedro-ai-app .tq-inf-desglose{ margin: 3px 0 0; font-size: 12.5px; font-weight: 650; color: #475569; }
#pedro-ai-app .tq-inf-lec{ padding: 11px 0; border-top: 1px solid #E2E8F0; }
#pedro-ai-app .tq-inf-lec > b{ font-size: 14px; font-weight: 800; }
#pedro-ai-app .tq-inf-fecha{ margin-left: 8px; font-size: 11.5px; font-weight: 650; color: #64748B; }
#pedro-ai-app .tq-inf-q{ margin-top: 7px; }
#pedro-ai-app .tq-inf-q i{ display: block; font-size: 12px; color: #475569; }
#pedro-ai-app .tq-inf-q p{ margin: 2px 0 0; white-space: pre-wrap; word-break: break-word; }
#pedro-ai-app .tq-inf-nota{
  margin: 9px 0 0; padding: 8px 11px; border-radius: 8px;
  background: #F0FDF4; border: 1px solid #BBF7D0; font-size: 12.5px;
}
@media print{
  /* Todo fuera menos la hoja. `visibility` y no `display` porque la hoja
     está DENTRO de lo que se esconde: con display:none se iría con el
     resto y saldrían páginas en blanco. */
  body * { visibility: hidden !important; }
  #pedro-ai-app .tq-inf-ov, #pedro-ai-app .tq-inf-ov * { visibility: visible !important; }
  #pedro-ai-app .tq-inf-ov{ position: absolute; inset: 0; padding: 0; background: #fff; overflow: visible; }
  #pedro-ai-app .tq-inf{ max-width: none; }
  #pedro-ai-app .tq-inf-barra{ display: none !important; }
  #pedro-ai-app .tq-inf-hoja{ border-radius: 0; padding: 0; }
  #pedro-ai-app .tq-inf-lec{ break-inside: avoid; page-break-inside: avoid; }
}

/* v6.123.0 — Las preguntas privadas, en el tablón del profesor. */
#pedro-ai-app .tq-board-coment.es-privado{
  background: #FFFBEB; border-left-color: #E0A800;
}
#pedro-ai-app .tq-board-lock{
  display: block; margin-bottom: 4px;
  font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: #92400E;
}
#pedro-ai-app .tq-board-responder{
  margin-top: 6px; padding: 4px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid #FDE68A; background: #fff; color: #92400E;
  font-family: var(--font); font-size: 11.5px; font-weight: 750;
}
#pedro-ai-app .tq-board-responder:hover{ background: #FFFBEB; }

/* ══════════════════════════════════════════════════════════════════════
   v6.135.0 — FECHA DE ENTREGA, ENCUESTAS Y «IMPORTANTE»

   Las tres cosas del panel que encienden lo que el aula ya sabe pintar.
   Todo cuelga de #pedro-ai-app y usa los tokens de arriba: ni un color
   suelto, para que el día que cambie la marca cambien también estas.
   ══════════════════════════════════════════════════════════════════════ */

/* ── La fecha de una asignación ───────────────────────────────────── */
#pedro-ai-app .tq-cls-due{
  display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;
  padding:5px 9px;border:1px dashed var(--border-2);border-radius:99px;
  background:transparent;cursor:pointer;
  font-size:12px;font-weight:700;color:var(--text-3);
  transition:border-color .16s ease,background .16s ease,color .16s ease;
}
#pedro-ai-app .tq-cls-due:hover{border-color:var(--brand,#6C5CE7);color:var(--text-2)}
/* Puesta = deja de ser una invitación y pasa a ser un dato. */
#pedro-ai-app .tq-cls-due.puesta{
  border-style:solid;border-color:var(--amber);background:var(--amber-bg);color:var(--amber);
}
#pedro-ai-app .tq-cls-due input[type=date]{
  border:0;background:transparent;padding:0;margin:0;outline:none;
  font-family:var(--font);font-size:12px;font-weight:750;color:inherit;
  width:112px;cursor:pointer;
}
/* Sin fecha, el campo vacío del navegador pone «dd/mm/aaaa» en gris casi
   invisible; se le da su propio color para que se vea que se puede tocar. */
#pedro-ai-app .tq-cls-due:not(.puesta) input[type=date]{color:var(--text-3)}
#pedro-ai-app .tq-cls-due input[type=date]:disabled{opacity:.5;cursor:default}
@media (max-width:620px){
  #pedro-ai-app .tq-cls-due input[type=date]{width:96px;font-size:11.5px}
}

/* ── El compositor: encuesta ──────────────────────────────────────── */
#pedro-ai-app .tq-board-tool.on{
  border-color:var(--brand,#6C5CE7);background:#F7F6FE;color:var(--brand,#6C5CE7);
}
#pedro-ai-app .tq-board-pollbox{margin-top:8px;display:grid;gap:7px}
#pedro-ai-app .tq-board-pollbox[hidden]{display:none!important}
#pedro-ai-app .tq-board-poll-ops{display:grid;gap:6px}
#pedro-ai-app .tq-board-poll-op{display:flex;align-items:center;gap:6px}
#pedro-ai-app .tq-board-poll-op input[type=text]{
  flex:1;min-width:0;min-height:38px;padding:8px 12px;
  border:1px solid var(--border-2);border-radius:var(--r);background:#fff;
  font-family:var(--font);font-size:13.5px;font-weight:600;color:var(--text);
}
#pedro-ai-app .tq-board-poll-op input[type=text]:focus{
  outline:none;border-color:var(--brand,#6C5CE7);box-shadow:0 0 0 3px var(--red-glow);
}
#pedro-ai-app .tq-board-poll-x{
  flex:0 0 auto;width:32px;height:32px;border:0;border-radius:99px;background:transparent;
  color:var(--text-4);font-size:17px;line-height:1;cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
#pedro-ai-app .tq-board-poll-x:hover{background:var(--surface-2);color:var(--text-2)}
#pedro-ai-app .tq-board-poll-add{
  justify-self:start;border:1px dashed var(--border-2);border-radius:99px;
  background:transparent;padding:7px 13px;cursor:pointer;
  font-family:var(--font);font-size:12px;font-weight:750;color:var(--text-3);
}
#pedro-ai-app .tq-board-poll-add:hover{border-color:var(--brand,#6C5CE7);color:var(--brand,#6C5CE7)}

/* ── El compositor: importante ────────────────────────────────────── */
#pedro-ai-app .tq-board-imp{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  min-height:38px;padding:8px 13px;border-radius:12px;
  border:1px solid var(--border);background:#fff;
  font-size:12.5px;font-weight:700;color:var(--text-2);
  transition:border-color .16s ease,background .16s ease;
}
#pedro-ai-app .tq-board-imp:hover{border-color:var(--amber);background:var(--amber-bg)}
#pedro-ai-app .tq-board-imp:has(input:checked){
  border-color:var(--amber);background:var(--amber-bg);color:var(--amber);
}
#pedro-ai-app .tq-board-imp input{accent-color:var(--amber);margin:0}

/* ── El recado marcado ────────────────────────────────────────────── */
#pedro-ai-app .tq-board-msg.es-importante{border-color:var(--amber);}
/* v6.141.0 — Un ámbar más oscuro SOLO aquí.
   --amber (#D97706) sobre --amber-bg da 3,07:1, y esto son 10,5 px en
   versalitas: por debajo del 4,5:1 que pide la WCAG para texto pequeño.
   No se toca la variable —vale de sobra para iconos y bordes— sino este
   texto, que es el que no se lee. #B45309 da 4,84:1. */
#pedro-ai-app .tq-board-chapa.es-imp{background:var(--amber-bg);color:#B45309}
#pedro-ai-app .tq-board-imp-btn{
  border:0;background:transparent;cursor:pointer;padding:4px 6px;border-radius:8px;
  font-size:13px;line-height:1;opacity:.4;
  transition:opacity .15s ease,background .15s ease;
}
#pedro-ai-app .tq-board-imp-btn:hover{opacity:1;background:var(--amber-bg)}
#pedro-ai-app .tq-board-imp-btn.on{opacity:1}

/* ── Los resultados de la encuesta ────────────────────────────────── */
#pedro-ai-app .tq-board-enc{display:grid;gap:6px;margin-top:10px}
/* El fondo de la fila va BLANCO y la barra tintada. Con los dos pálidos
   —surface-2 detrás y red-glow encima— la parte llena y la vacía se
   parecían tanto que la barra parecía ir al revés. Medido en pantalla. */
#pedro-ai-app .tq-board-enc-op{
  position:relative;overflow:hidden;display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:var(--r);
  border:1px solid var(--border);background:#fff;
}
#pedro-ai-app .tq-board-enc-op .barra{
  position:absolute;left:0;top:0;bottom:0;background:rgba(108,92,231,.13);
  transition:width .5s cubic-bezier(.2,.7,.3,1);
}
/* La más votada, marcada: es lo único que el profesor va a mirar. */
#pedro-ai-app .tq-board-enc-op.gana{border-color:rgba(108,92,231,.38)}
#pedro-ai-app .tq-board-enc-op.gana .barra{background:rgba(108,92,231,.28)}
#pedro-ai-app .tq-board-enc-op > .txt,
#pedro-ai-app .tq-board-enc-op > .n{position:relative}
#pedro-ai-app .tq-board-enc-op .txt{
  flex:1;min-width:0;font-size:13.5px;font-weight:650;color:var(--text);
}
#pedro-ai-app .tq-board-enc-op .n{
  flex:0 0 auto;font-size:12.5px;font-weight:800;color:var(--text-2);
  font-variant-numeric:tabular-nums;
}
#pedro-ai-app .tq-board-enc-op .n i{font-style:normal;font-weight:650;color:var(--text-3)}
#pedro-ai-app .tq-board-enc-op.gana .n{color:var(--brand,#6C5CE7)}
#pedro-ai-app .tq-board-enc-pie{
  margin:2px 0 0;font-size:11.5px;font-weight:650;color:var(--text-3);
}

/* ── Quién ha confirmado que lo ha leído ──────────────────────────── */
#pedro-ai-app .tq-board-ent{
  margin-top:10px;padding:10px 12px;border-radius:var(--r);
  background:var(--green-bg);border:1px solid var(--green-bdr);
}
#pedro-ai-app .tq-board-ent.vacio{background:var(--amber-bg);border-color:rgba(217,119,6,.28)}
#pedro-ai-app .tq-board-ent b{
  display:block;font-size:12.5px;font-weight:800;color:var(--green);letter-spacing:-.01em;
}
#pedro-ai-app .tq-board-ent.vacio b{color:var(--amber)}
#pedro-ai-app .tq-board-ent span{
  display:block;margin-top:4px;font-size:12px;font-weight:600;color:var(--text-2);line-height:1.5;
}


/* ══════════════════════════════════════════════════════════════════
   v6.141.0 · PROGRAMAR UN RECADO Y PUBLICARLO EN VARIAS CLASES
   ══════════════════════════════════════════════════════════════════ */
/* Ancho completo: .tq-board-new es un flex en columna con
   align-items:flex-end —para que «Publicar» quede a la derecha— y sin
   esto las dos cajas se encogían a su contenido y quedaban flotando en
   la mitad derecha, con un hueco muerto a la izquierda. */
#pedro-ai-app .tq-board-cuandobox,
#pedro-ai-app .tq-board-clasesbox,
#pedro-ai-app .tq-board-hecho{
  align-self:stretch;width:100%;
}
#pedro-ai-app .tq-board-cuandobox,
#pedro-ai-app .tq-board-clasesbox{
  margin-top:10px;padding:12px 13px;border-radius:10px;
  background:#F7F7FB;border:1px dashed #D7D7E4;
}
#pedro-ai-app .tq-board-cuandobox label{font-size:12.5px;font-weight:700;color:#3A3B4C}
#pedro-ai-app .tq-board-cuandobox input[type="datetime-local"]{
  height:34px;padding:0 10px;border:1px solid #D7D7E4;border-radius:8px;
  background:#fff;font:inherit;font-size:13px;color:#15151F;
}
#pedro-ai-app .tq-board-cuando-quitar{
  height:34px;padding:0 12px;margin-left:6px;border:1px solid #D7D7E4;border-radius:8px;
  background:#fff;cursor:pointer;font-size:12px;font-weight:700;color:#63657A;
}
#pedro-ai-app .tq-board-cuando-quitar:hover{border-color:#B03A0F;color:#B03A0F}
/* El botón se enciende cuando hay algo puesto: si no, el profesor cierra
   la caja, no ve nada distinto y no sabe si quedó programado o no. */
#pedro-ai-app .tq-board-tool.on{
  background:#6C5CE7;border-color:#6C5CE7;color:#fff;
}
#pedro-ai-app .tq-board-clases-lista{
  display:flex;flex-wrap:wrap;gap:7px;margin-top:8px;
}
#pedro-ai-app .tq-board-clase-op{
  display:inline-flex;align-items:center;gap:7px;padding:7px 12px;
  border:1px solid #D7D7E4;border-radius:99px;background:#fff;cursor:pointer;
  font-size:12.5px;font-weight:650;color:#3A3B4C;
}
#pedro-ai-app .tq-board-clase-op:hover{border-color:#6C5CE7}
#pedro-ai-app .tq-board-clase-op:has(input:checked){
  background:#F2F0FE;border-color:#6C5CE7;color:#4B39C0;
}
#pedro-ai-app .tq-board-hecho{
  margin:10px 0 0;padding:9px 12px;border-radius:8px;
  background:#EAF7F0;border:1px solid #C9E9D8;color:#12764A;
  font-size:12.5px;font-weight:700;
}
/* El recado que todavía no se ve. Rayado, no solo con una etiqueta: en un
   tablón con quince recados una chapa más se lee como una etiqueta más, y
   esto es lo único de la lista que la clase NO está viendo. */
#pedro-ai-app .tq-board-msg.es-programado{
  border-style:dashed;border-color:#C3B9FA;
  background:
    repeating-linear-gradient(135deg,
      rgba(108,92,231,.045) 0 10px, transparent 10px 20px),
    #fff;
}
#pedro-ai-app .tq-board-chapa.es-prog{
  background:#F2F0FE;color:#4B39C0;border-color:#DAD4FB;
}


/* ══════════════════════════════════════════════════════════════════
   v6.142.0 · «TE ESPERAN» — lo que del tablón pide respuesta
   ══════════════════════════════════════════════════════════════════
   Va arriba del compositor. Si no hay nada pendiente no existe: no hay
   estado vacío, porque una caja diciendo «no hay nada» sería ruido
   permanente a cambio de una buena noticia que ya se nota sin decirla. */
#pedro-ai-app .tq-pendientes{
  margin:0 0 14px;border:1px solid #DAD4FB;border-radius:12px;overflow:hidden;
  background:#FBFAFF;
}
#pedro-ai-app .tq-pend-cab{
  display:flex;align-items:center;gap:9px;padding:10px 14px;
  background:#F2F0FE;border-bottom:1px solid #DAD4FB;
}
#pedro-ai-app .tq-pend-cab b{
  font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:#4B39C0;
}
#pedro-ai-app .tq-pend-n{
  min-width:20px;height:20px;padding:0 6px;border-radius:99px;
  display:inline-grid;place-items:center;
  background:#6C5CE7;color:#fff;font-size:11.5px;font-weight:800;
}
#pedro-ai-app .tq-pend-fila{
  display:flex;align-items:center;gap:11px;width:100%;padding:10px 14px;
  border:0;border-top:1px solid #EDEAFD;background:transparent;cursor:pointer;
  text-align:left;font:inherit;transition:background .14s;
}
#pedro-ai-app .tq-pend-fila:first-of-type{border-top:0}
#pedro-ai-app .tq-pend-fila:hover{background:#F2F0FE}
#pedro-ai-app .tq-pend-ico{flex:0 0 auto;font-size:15px;line-height:1}
#pedro-ai-app .tq-pend-txt{flex:1;min-width:0}
#pedro-ai-app .tq-pend-txt b{
  display:block;font-size:11.5px;font-weight:800;color:#4B39C0;margin-bottom:2px;
}
#pedro-ai-app .tq-pend-txt span{
  display:block;font-size:13px;font-weight:450;color:#3A3B4C;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* #6C5CE7 y no #8B7BFF: el claro daba 3,17:1 sobre este fondo. Es un
   adorno —lleva aria-hidden— así que pasaba el 3:1 de los elementos
   gráficos por los pelos, pero una flecha que apenas se ve no invita a
   pulsar, que es justo para lo que está. Ahora 4,68:1. */
#pedro-ai-app .tq-pend-ir{flex:0 0 auto;font-size:18px;color:#6C5CE7;font-weight:700}
/* El recado al que se ha bajado, señalado un momento. */
#pedro-ai-app .tq-board-msg.tq-pend-mira{
  animation:tq-pend-mira 2.6s ease;
}
@keyframes tq-pend-mira{
  0%,70%{box-shadow:0 0 0 3px #C3B9FA}
  100%{box-shadow:0 0 0 0 rgba(195,185,250,0)}
}
@media (prefers-reduced-motion:reduce){
  #pedro-ai-app .tq-board-msg.tq-pend-mira{animation:none;box-shadow:0 0 0 3px #C3B9FA}
}

/* v6.142.0 · Cuántos te esperan, en la tarjeta de la clase.
   Va arriba a la derecha, donde el ojo ya pasa al leer el nombre, y en
   el color de aviso: es lo único de la tarjeta que pide algo de ti. */
#pedro-ai-app .tq-cls-esperan{
  margin-left:auto;flex:0 0 auto;
  min-width:22px;height:22px;padding:0 7px;border-radius:99px;
  display:inline-grid;place-items:center;
  background:#B45309;color:#fff;
  font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums;
  box-shadow:0 1px 3px rgba(180,83,9,.35);
}
#pedro-ai-app .tq-cls-card-top{display:flex;align-items:center;gap:8px}


/* ══════════════════════════════════════════════════════════════════
   v6.143.0 · LA FICHA DE UN ALUMNO
   ══════════════════════════════════════════════════════════════════ */
#pedro-ai-app .tq-cls-member-abrir{
  display:flex;align-items:center;gap:10px;flex:1;min-width:0;
  border:0;background:transparent;cursor:pointer;padding:0;font:inherit;text-align:left;
  border-radius:8px;transition:background .14s;
}
#pedro-ai-app .tq-cls-member-abrir:hover{background:#F2F0FE}
#pedro-ai-app .tq-cls-member-abrir .tq-cls-member-alias{flex:1;min-width:0}

#pedro-ai-app .tq-ficha-cab{margin-bottom:14px}
#pedro-ai-app .tq-ficha-volver{
  border:1px solid #D7D7E4;background:#fff;border-radius:99px;padding:7px 14px;
  cursor:pointer;font-size:12.5px;font-weight:700;color:#3A3B4C;
}
#pedro-ai-app .tq-ficha-volver:hover{border-color:#6C5CE7;color:#4B39C0}
#pedro-ai-app .tq-ficha-quien{display:flex;align-items:center;gap:12px;margin-bottom:16px}
#pedro-ai-app .tq-ficha-quien .tq-board-av{width:44px;height:44px;font-size:17px}
#pedro-ai-app .tq-ficha-nombre b{display:block;font-size:19px;font-weight:800;color:#15151F}
#pedro-ai-app .tq-ficha-nombre span{display:block;margin-top:2px;font-size:12.5px;font-weight:500;color:#63657A}

/* Las cifras: lo que se mira primero. Cuatro, no diez — una fila de
   números que no caben de un vistazo no se lee, se sobrevuela. */
#pedro-ai-app .tq-ficha-cifras{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:18px;
}
#pedro-ai-app .tq-ficha-cifra{
  padding:13px 15px;border-radius:12px;background:#F7F7FB;border:1px solid #E5E5EE;
}
#pedro-ai-app .tq-ficha-cifra b{display:block;font-size:22px;font-weight:800;color:#15151F;line-height:1.1}
#pedro-ai-app .tq-ficha-cifra span{display:block;margin-top:3px;font-size:11.5px;font-weight:600;color:#63657A}
#pedro-ai-app .tq-ficha-cifra.es-ojo{background:#FFFBEB;border-color:#FDE68A}
#pedro-ai-app .tq-ficha-cifra.es-ojo b{color:#B45309}
#pedro-ai-app .tq-ficha-barra{display:block;height:4px;margin-top:9px;border-radius:99px;background:#E5E5EE;overflow:hidden}
#pedro-ai-app .tq-ficha-barra u{display:block;height:100%;background:#6C5CE7;border-radius:99px}

#pedro-ai-app .tq-ficha-bloque{
  margin-bottom:16px;padding:15px 16px;border-radius:12px;
  background:#fff;border:1px solid #E5E5EE;
}
#pedro-ai-app .tq-ficha-bloque.es-ojo{background:#FFFBEB;border-color:#FDE68A}
#pedro-ai-app .tq-ficha-bloque h5{
  margin:0 0 11px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#63657A;
}
#pedro-ai-app .tq-ficha-bloque.es-ojo h5{color:#B45309}
#pedro-ai-app .tq-ficha-linea{font-size:14px;font-weight:600;color:#3A3B4C;padding:4px 0}

#pedro-ai-app .tq-ficha-mats{display:flex;flex-direction:column;gap:5px}
#pedro-ai-app .tq-ficha-mat{
  display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;background:#F7F7FB;
}
/* v6.143.0 — #5C5B70 y no #8B8A9E: el gris claro daba 2,69:1 sobre su
   propio círculo. Es un punto de estado, pero un punto que no se ve no
   dice «sin marcar», dice nada. Ahora 5,27:1. */
#pedro-ai-app .tq-ficha-mat-est{
  flex:0 0 auto;width:20px;height:20px;border-radius:99px;display:grid;place-items:center;
  font-size:11px;font-weight:800;background:#E5E5EE;color:#5C5B70;
}
#pedro-ai-app .tq-ficha-mat.es-hecho .tq-ficha-mat-est{background:#12764A;color:#fff}
#pedro-ai-app .tq-ficha-mat.es-atascado .tq-ficha-mat-est{background:#B45309;color:#fff}
#pedro-ai-app .tq-ficha-mat-tt{
  flex:1;min-width:0;font-size:13.5px;font-weight:550;color:#3A3B4C;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Lo no marcado se apaga un poco, para que lo hecho y lo atascado salten.
   Un poco: con #8B8A9E se quedaba en 3,16:1 y el título de un material
   dejaba de leerse. Atenuar no puede llegar a borrar — el profesor tiene
   que poder leer qué es lo que el alumno NO ha tocado, que es justo la
   información que viene a buscar. #6E6D82 da 4,71:1 y sigue siendo
   claramente el segundo plano. */
#pedro-ai-app .tq-ficha-mat.es-nada .tq-ficha-mat-tt{color:#6E6D82}

/* La conversación privada: burbujas, como en el aula del alumno. Si
   aquí se viera como una tabla y allí como un chat, las dos mitades de
   la misma conversación parecerían dos cosas distintas. */
#pedro-ai-app .tq-ficha-priv{display:flex;flex-direction:column;gap:9px;margin-bottom:12px}
#pedro-ai-app .tq-ficha-burbuja{
  max-width:80%;align-self:flex-start;padding:10px 13px;border-radius:12px;
  background:#F1F1F7;border:1px solid #E5E5EE;border-bottom-left-radius:4px;
  font-size:13.5px;font-weight:450;line-height:1.55;color:#15151F;
}
#pedro-ai-app .tq-ficha-burbuja.es-mia{
  align-self:flex-end;background:#6C5CE7;border-color:#6C5CE7;color:#fff;
  border-bottom-left-radius:12px;border-bottom-right-radius:4px;
}
#pedro-ai-app .tq-ficha-burbuja-quien{
  display:block;margin-bottom:4px;font-size:10.5px;font-weight:700;opacity:.75;
}
#pedro-ai-app .tq-ficha-responder{display:flex;gap:9px;align-items:flex-end}
#pedro-ai-app .tq-ficha-responder textarea{
  flex:1;min-width:0;resize:vertical;min-height:44px;padding:10px 12px;
  border:1px solid #D7D7E4;border-radius:10px;font:inherit;font-size:13.5px;color:#15151F;background:#fff;
}
#pedro-ai-app .tq-ficha-responder textarea:focus{
  outline:none;border-color:#6C5CE7;box-shadow:0 0 0 3px #F2F0FE;
}

/* v6.143.0 · Las dos cajas que sustituyen a los prompt() del tablón:
   contestar en privado y corregir un recado. */
#pedro-ai-app .tq-board-respbox,
#pedro-ai-app .tq-board-editbox{
  display:flex;gap:8px;align-items:flex-end;margin-top:9px;
}
#pedro-ai-app .tq-board-editbox{flex-direction:column;align-items:stretch}
#pedro-ai-app .tq-board-respbox textarea,
#pedro-ai-app .tq-board-editbox textarea{
  flex:1;min-width:0;resize:vertical;padding:9px 11px;
  border:1px solid #D7D7E4;border-radius:9px;background:#fff;
  font:inherit;font-size:13.5px;line-height:1.5;color:#15151F;
}
#pedro-ai-app .tq-board-respbox textarea:focus,
#pedro-ai-app .tq-board-editbox textarea:focus{
  outline:none;border-color:#6C5CE7;box-shadow:0 0 0 3px #F2F0FE;
}
#pedro-ai-app .tq-board-editbox-pie{display:flex;gap:8px;justify-content:flex-end}
#pedro-ai-app .tq-board-edit-x{
  border:1px solid #D7D7E4;background:#fff;border-radius:8px;padding:8px 14px;
  cursor:pointer;font-size:12.5px;font-weight:700;color:#63657A;
}
#pedro-ai-app .tq-board-edit-x:hover{border-color:#B03A0F;color:#B03A0F}

/* v6.144.0 · Cuántos accesos se han juntado en una fila de alumno. */
#pedro-ai-app .tq-cls-member-disp{
  flex:0 0 auto;padding:2px 8px;border-radius:99px;
  background:#F2F0FE;border:1px solid #DAD4FB;color:#4B39C0;
  font-size:11px;font-weight:800;font-variant-numeric:tabular-nums;
}

/* v6.154.0 — «Empezar de nuevo»: el estado de confirmación tiene que
   verse. Se pulsa con la clase entrando por la puerta, así que si el
   botón no cambia de aspecto, el profesor no distingue si ya ha
   confirmado o no y acaba pulsando dos veces sin querer. */
#pedro-ai-app #pedro-reset-quiz.confirming {
  background: #DC2626 !important;
  color: #fff !important;
  border-color: #DC2626 !important;
}

/* 6.177.1: dense word searches must not inherit button minimum sizes. */
.tq-wb-sopa,.tq-wb-sopa-grid{min-width:0}
.tq-wb-sopa-grid button{min-width:0;min-height:0;padding:0;overflow:hidden;font-size:clamp(8px,1.2vw,16px)}

/* ═══════════════════════════════════════════════════════════════════════
   v6.184.0 — LA PIZARRA, EN EL COLOR DE LA CASA

   El botón de Guardar seguía en el rojo anaranjado del acento viejo, y el
   de Panel se encendía en azul: dos colores que ya no son de Teeqo, y los
   dos en la misma barra, compitiendo entre ellos y con el indigo del
   resto del producto. El acento de Teeqo es el indigo; aquí se termina de
   aplicar.

   Y hay una jerarquía que respetar: Guardar es la acción principal y va
   en bloque de color; Panel es un interruptor —encendido o apagado— y va
   en tinte, no en bloque. Dos botones llenos, uno al lado del otro, no
   dicen cuál es el importante.
   ═══════════════════════════════════════════════════════════════════════ */
#pedro-ai-app .tq-wb-v3-actions .tq-wb-primary-action,
#pedro-ai-app .tq-wb-v3-actions #tq-wb-save{
  /* Las tres paradas están medidas con el rótulo blanco encima: la más
     clara da 5,2:1, así que el texto se lee en todo el recorrido. */
  background:linear-gradient(135deg,#4B3BD3 0%,#5847DA 55%,#6558E0 100%)!important;
  border-color:#4433C4!important;
  color:#fff!important;
  box-shadow:0 7px 16px rgba(76,59,211,.24)!important;
}
#pedro-ai-app .tq-wb-v3-actions .tq-wb-primary-action:hover,
#pedro-ai-app .tq-wb-v3-actions #tq-wb-save:hover{
  background:linear-gradient(135deg,#3E2FBE 0%,#4B3BD3 58%,#5847DA 100%)!important;
  border-color:#362AA6!important;
  box-shadow:0 10px 22px rgba(62,47,190,.30)!important;
}
#pedro-ai-app .tq-wb-v3-actions .tq-wb-primary-action:active,
#pedro-ai-app .tq-wb-v3-actions #tq-wb-save:active{
  background:#362AA6!important;color:#fff!important;
}
#pedro-ai-app .tq-wb-v3-actions button.tq-wb-toggle-dock-btn.is-active,
#pedro-ai-app .tq-wb-v3-actions button.tq-wb-toggle-dock-btn[aria-pressed="true"]{
  background:#EFEAFF!important;
  border-color:rgba(76,59,211,.38)!important;
  color:#4B3BD3!important;
  box-shadow:inset 0 0 0 1px rgba(76,59,211,.14)!important;
}
#pedro-ai-app .tq-wb-v3-actions button.tq-wb-toggle-dock-btn.is-active:hover,
#pedro-ai-app .tq-wb-v3-actions button.tq-wb-toggle-dock-btn[aria-pressed="true"]:hover{
  background:#E4DCFF!important;border-color:#4B3BD3!important;color:#3E2FBE!important;
}
/* Cerrado también: el botón de Panel se pintaba en azul #1d4ed8 para
   llamar la atención. La idea es buena —es el botón que abre el cajón de
   herramientas— pero el azul no es de esta casa. Mismo papel, color de
   Teeqo. */
#pedro-ai-app .tq-wb-v3-actions button.tq-wb-toggle-dock-btn[aria-pressed="false"],
#pedro-ai-app .tq-wb-v3-actions button.tq-wb-toggle-dock-btn:not(.is-active){
  color:#4B3BD3!important;
  border-color:rgba(76,59,211,.22)!important;
}
/* El rótulo y el icono van dentro de <span>: si sólo se pinta el botón,
   el azul viejo del texto se queda escrito dentro. */
#pedro-ai-app .tq-wb-v3-actions button.tq-wb-toggle-dock-btn .tq-wb-action-label,
#pedro-ai-app .tq-wb-v3-actions button.tq-wb-toggle-dock-btn .tq-wb-action-icon{
  color:inherit!important;
}
/* Dentro del menú «…», todas las filas tienen que parecer filas del mismo
   menú. «Imagen» llevaba fondo blanco forzado y sombra propia de cuando
   vivía en la barra, y ahí dentro se leía como un botón suelto. */
#pedro-ai-app .tq-wb-mas-menu button.tq-wb-action-btn,
#pedro-ai-app .tq-wb-mas-menu button#tq-wb-download,
#pedro-ai-app .tq-wb-mas-menu button.tq-wb-download-white{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  color:var(--text)!important;
  border-radius:10px!important;
}
#pedro-ai-app .tq-wb-mas-menu button.tq-wb-action-btn:hover{
  background:#F1EFFD!important;color:#4B3BD3!important;
}
/* Salvo la de limpiar: esa borra la clase entera y tiene que verse antes
   de pulsarla, no después. */
#pedro-ai-app .tq-wb-mas-menu button.tq-wb-danger-action{color:#A81F49!important;}
#pedro-ai-app .tq-wb-mas-menu button.tq-wb-danger-action:hover{
  background:#FDECEF!important;color:#8E1D3D!important;
}

/* El botón de Panel tenía tres pinturas distintas repartidas por la hoja
   —azul, azul con verde, y azul otra vez dentro de una media query— y la
   de la media query lleva DOS identificadores, así que ganaba en el móvil
   por mucho que se arreglara el escritorio. Se cierra aquí, con el mismo
   peso y al final: encendido en tinte indigo, apagado en papel con la
   tinta de la casa. Un interruptor no necesita gritar. */
#pedro-ai-app .tq-wb-v3-actions #tq-wb-toggle-dock,
#pedro-ai-app .tq-wb-v3-actions #tq-wb-toggle-dock:hover,
#pedro-ai-app .tq-wb-v3-actions #tq-wb-toggle-dock:focus-visible{
  background:#FFFFFF!important;
  border-color:rgba(76,59,211,.22)!important;
  color:#4B3BD3!important;
}
#pedro-ai-app .tq-wb-v3-actions #tq-wb-toggle-dock:hover{
  background:#F4F1FF!important;border-color:rgba(76,59,211,.42)!important;
}
#pedro-ai-app .tq-wb-v3-actions #tq-wb-toggle-dock.is-active,
#pedro-ai-app .tq-wb-v3-actions #tq-wb-toggle-dock[aria-pressed="true"],
#pedro-ai-app .tq-wb-v3-actions #tq-wb-toggle-dock[aria-pressed="true"]:hover{
  background:#EFEAFF!important;
  border-color:rgba(76,59,211,.42)!important;
  color:#3E2FBE!important;
}