/* TONE MATRIX (PT/EN) :: CSS */
#tone-app{
  --bg:#ffffff; --panel:#ffffff; --ink:#111314; --muted:#6e7379; --line:#e6e9ec;
  --accent:#F5C84C; --gap:12px; --radius:14px; --shadow:0 1px 2px rgba(0,0,0,.06);
  --tag-p:#2563eb; --tag-i:#16a34a; --tag-r:#7c3aed; --tag-ri:#dc2626;
  --diag:#f3f4f6; --hit:#fff3bf;
  --line-glow: rgba(56,149,255,.30); --line-glow-strong: rgba(245,200,76,.35);
}
#tone-app, #tone-app *{ box-sizing:border-box }
#tone-app{ color:var(--ink); background:var(--bg); font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Noto Sans",sans-serif }
#tone-app .wrap{ max-width:1100px; margin:0 auto; padding:24px }
#tone-app .card{ position:relative; background:var(--panel); border:1px solid var(--line);
  box-shadow:var(--shadow); border-radius:var(--radius); padding:16px }

/* Botão PT/EN centrado (acima do teclado) */
#tone-app .lang-centered{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom:14px;
}
#tone-app .btn-ghost{
  border:none;
  background:transparent;
  padding:4px;
  cursor:pointer;
  border-radius:12px;
}
#tone-app .btn-ghost:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
#tone-app .lang-img{
  display:block;
  height:28px;
  width:auto;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}

#tone-app .center{ display:flex; justify-content:center }
#tone-app .row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:center }

/* ====== CONTENTOR DO TECLADO (chips agrupados) ====== */
#tone-app .kb-container{
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  padding:12px 12px 14px;
  margin:0 auto 16px;
  max-width:960px;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}
#tone-app .kb-header{ display:flex; align-items:center; justify-content:center; margin-bottom:8px }
#tone-app .kb-title{ margin:0; font-size:14px; font-weight:800; letter-spacing:.02em; color:var(--muted) }

/* teclado (chips de inserção em BOLD) */
#tone-app .kb-wrap{ margin:0 } /* já temos padding no contentor */
#tone-app .kb{ display:grid; grid-template-columns:repeat(12, minmax(42px,1fr)); gap:8px; max-width:100% }
#tone-app .keypair{ display:flex; flex-direction:column; gap:6px; align-items:stretch }
#tone-app .key{ padding:10px 14px; border:1px solid var(--line); border-radius:999px; background:#fff; cursor:pointer;
  font-weight:800; font-size:15px; line-height:1.1; touch-action:manipulation; }
#tone-app .key[disabled]{ opacity:.45; cursor:not-allowed }
#tone-app .key.active{ background:var(--accent); border-color:#e8b63d }

/* matriz */
#tone-app .matrix-host{
  max-width:100%; overflow:auto; border:1px solid var(--line); border-radius:12px;
  -webkit-overflow-scrolling:touch; /* iOS smooth scroll */
}
#tone-app table.matrix{ border-collapse:collapse; width:100%; min-width:720px; font-variant-numeric:tabular-nums }
#tone-app .matrix th{ border:1px solid var(--line); padding:6px 8px; text-align:center; white-space:nowrap; font-size:11px; font-weight:600; background:#fff; position:sticky; top:0; z-index:1 }
#tone-app .matrix td{ border:1px solid var(--line); padding:8px 10px; text-align:center; white-space:nowrap; font-size:14px; font-weight:700; position:relative }
#tone-app .matrix td.diag{ background:var(--diag) }
#tone-app .matrix td.hit{ background:var(--hit) }
#tone-app .matrix td.line::after{ content:""; position:absolute; inset:0; box-shadow: inset 0 0 0 9999px var(--line-glow); pointer-events:none; }
#tone-app .matrix td.line-strong::after{ box-shadow: inset 0 0 0 9999px var(--line-glow-strong); }
#tone-app .placeholder{ color:var(--muted); font-size:13px }

/* etiquetas e setas */
#tone-app .hdr{ display:flex; align-items:center; justify-content:center; gap:4px }
#tone-app .hdr-i{ flex-direction:column } #tone-app .hdr-i .arrow{ order:2 }
#tone-app .hdr-ri{ flex-direction:column } #tone-app .hdr-ri .arrow{ order:-1 }
#tone-app .hdr-r{ flex-direction:row-reverse }
#tone-app .tag{ display:inline-block; font-size:11px; line-height:1; padding:3px 8px; border-radius:999px; color:#fff; font-weight:700 }
#tone-app .tag-p{ background:var(--tag-p) } 
#tone-app .tag-i{ background:var(--tag-i) } 
#tone-app .tag-r{ background:var(--tag-r) } 
#tone-app .tag-ri{ background:var(--tag-ri) }
#tone-app .arrow{ width:0; height:0; border-style:solid }
#tone-app .arrow.right{ border-width:5px 0 5px 8px; border-color:transparent transparent transparent var(--tag-p) }
#tone-app .arrow.down { border-width:8px 5px 0 5px; border-color:var(--tag-i) transparent transparent transparent }
#tone-app .arrow.left { border-width:5px 8px 5px 0; border-color:transparent var(--tag-r) transparent transparent }
#tone-app .arrow.up   { border-width:0 5px 8px 5px; border-color:transparent transparent var(--tag-ri) transparent }
#tone-app .hdr-btn{ cursor:pointer; user-select:none; border-radius:10px; padding:2px 4px }
#tone-app .hdr-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
#tone-app .hdr-btn.active{ box-shadow:0 0 0 2px var(--accent) inset; background:#fff8e1 }

/* botões e barras */
#tone-app .btn{ border:1px solid var(--line); border-radius:10px; padding:8px 12px; background:#fff; cursor:pointer; font-weight:700; touch-action:manipulation; }
#tone-app .btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
#tone-app .series-bar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:center; margin-top:12px }
#tone-app .select{
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 14px;
  background:linear-gradient(#fff, #f9fafb);
  min-width:360px;

  font-size:15px;          /* ↑ ligeiramente maior */
  font-weight:300;         /* dá mais presença */
  color:var(--ink);
  line-height:1.2;

  box-shadow:0 1px 3px rgba(0,0,0,.06);
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
  cursor:pointer;
}

/* ======== 4 BOTÕES COLORIDOS SUAVES ======== */

/* Desfazer → azul claro */
#tone-app #undoBtn{
  background:#e8f1ff;
  border-color:#c9dcfa;
}
#tone-app #undoBtn:hover{
  background:#dce9ff;
  border-color:#b3cefb;
}

/* Limpar série → dourado suave */
#tone-app #resetBtn{
  background:#fff8e1;
  border-color:#f5d86b;
}
#tone-app #resetBtn:hover{
  background:#ffefb8;
  border-color:#f4cb3e;
}

/* Limpar linhas → verde-água (usa o accent2) */
#tone-app #clearSeriesHighlightsBtn{
  background:#e4f9f7;
  border-color:#9fe2da;
}
#tone-app #clearSeriesHighlightsBtn:hover{
  background:#d4f4f0;
  border-color:#76d3c8;
}

/* Limpar notas → rosa pastel */
#tone-app #clearNotesBtn{
  background:#ffe8eb;
  border-color:#f5b6bd;
}
#tone-app #clearNotesBtn:hover{
  background:#ffdce1;
  border-color:#f38a95;
}

/* hover/focus com subtileza */
#tone-app .select:hover{
  border-color:#d4d8dc;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  background:linear-gradient(#fff, #f3f4f6);
}
#tone-app .select:focus{
  outline:none;
  border-color:#e8b63d;
  box-shadow:0 0 0 3px rgba(245,200,76,.25);
  background:#fff;
}

#tone-app .label{
  font-weight:700;          /* um pouco mais leve que 800 */
  font-size:12px;           /* ligeiramente maior e mais legível */
  letter-spacing:.03em;     /* um toque de abertura */
  color:var(--ink);
  text-transform:uppercase; /* opcional: mantém consistência com “SÉRIES” */
}


/* barra de notas (baixo) — menos ênfase */
#tone-app .notes-bar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:center; margin:14px 0 }
#tone-app .note-btn{
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 14px;          /* ↑ mais confortável */
  background:#fff;
  cursor:pointer;
  font-weight:700;
  font-size:16px;            /* ↑ fonte maior */
  line-height:1.2;
  color:var(--ink);
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
  touch-action:manipulation;
}

#tone-app .note-btn:hover{
  border-color:#d4d8dc;
  box-shadow:0 2px 5px rgba(0,0,0,.08);
}

#tone-app .note-btn.active{
  background:var(--accent);
  border-color:#e8b63d;
  color:#000;
}

/* título “NOTAS” */
#tone-app .notes-title{
  font-weight:800;
  font-size:16px;           /* ↑ harmoniza com os chips */
  margin-right:6px;
  letter-spacing:.02em;
  color:var(--ink);
}

/* opcional — ligeiro ajuste no mobile */
@media (max-width:560px){
  #tone-app .note-btn{
    font-size:15px;
    padding:7px 12px;
  }
  #tone-app .notes-title{
    font-size:15px;
  }
}


/* ações acima do dropdown */
#tone-app .actions-over-dropdown{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:center; margin:8px 0 2px }

/* responsivo */
@media (max-width:900px){
  #tone-app .kb{ grid-template-columns:repeat(6, minmax(42px,1fr)); }
  #tone-app .kb-container{ padding:10px 10px 12px; }
  #tone-app .select{ min-width:260px; }
  #tone-app table.matrix{ min-width:640px; }
  #tone-app .matrix th{ font-size:10px }
  #tone-app .matrix td{ font-size:13px; padding:7px 8px }
}
@media (max-width:560px){
  #tone-app .wrap{ padding:16px }
  #tone-app .kb{ grid-template-columns:repeat(4, minmax(44px,1fr)); gap:6px; }
  #tone-app .key{ padding:9px 12px; font-size:10px; }
  #tone-app .select{ min-width:220px }
}

/* =========================================================
   MODO EMBED — apenas matriz (iframe)
   Ativo com ?mode=embed
========================================================= */

/* =========================================================
   1) Esconder UI da APP (controlos, títulos, inputs)
========================================================= 
body.embed #tone-app header,
body.embed #tone-app h1,
body.embed #tone-app .app-title,
body.embed #tone-app .lang-centered,
body.embed #tone-app .kb-container,
body.embed #tone-app .series-bar,
body.embed #tone-app .actions-over-dropdown,
body.embed #tone-app .notes-bar,
body.embed #tone-app #keyboard,
body.embed #tone-app #notesBar,
body.embed #tone-app #seriesSelect,
body.embed #tone-app #undoBtn,
body.embed #tone-app #resetBtn,
body.embed #tone-app #clearSeriesHighlightsBtn,
body.embed #tone-app #clearNotesBtn,
body.embed #tone-app #langBtn {
  display: none !important;
}*/

/* =========================================================
   2) Esconder CABEÇALHO e RODAPÉ do tema WordPress
========================================================= */
body.embed header,
body.embed #masthead,
body.embed .site-header,
body.embed footer,
body.embed .site-footer {
  display: none !important;
}

/* =========================================================
   2b) Garantia total: menus, navegação, breadcrumbs
========================================================= */
body.embed nav,
body.embed .nav,
body.embed .navigation,
body.embed .menu,
body.embed .breadcrumbs,
body.embed .breadcrumb,
body.embed .wp-block-navigation {
  display: none !important;
}

/* =========================================================
   2c) Remover overlays flutuantes (Subscribe / WP Coder)
========================================================= */
body.embed a[href*="subscribe"],
body.embed button[class*="subscribe"],
body.embed div[class*="subscribe"],
body.embed .subscribe,
body.embed .subscription,
body.embed .newsletter,
body.embed .floating-button,
body.embed .floating-action,
body.embed .floating-widget,
body.embed .wp-coder-floating,
body.embed .wpcoder-floating,
body.embed .wpcoder-fab,
body.embed [class*="floating"],
body.embed [id*="floating"],
body.embed [class*="wpcoder"],
body.embed [id*="wpcoder"] {
  display: none !important;
}

/* =========================================================
   3) Remover espaçamentos estruturais do tema
========================================================= */
body.embed {
  margin: 0 !important;
  padding: 0 !important;
}

body.embed #page,
body.embed #content,
body.embed #primary,
body.embed main {
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================================================
   4) Ajuste fino do espaço interno da matriz
========================================================= */
body.embed #tone-app .wrap {
  padding: 8px;
}

body.embed #tone-app .card {
  padding: 8px;
  border-radius: 10px;
}