/* ============================================================
   ESCOPO TOTAL (nada escapa para o site)
============================================================ */
#cadencias-app,
#cadencias-app * {
  box-sizing: border-box;
}

/* ============================================================
   VARIÁVEIS DO APP
============================================================ */
#cadencias-app {
  --ink:#121416; 
  --muted:#6e7379; 
  --line:#e6e9ec; 
  --bg:#ffffff; 
  --panel:#fafbfc;
  --accent:#F5C84C; 
  --accent2:#12B3B6;
  --radius:14px; 
  --shadow:0 8px 28px rgba(0,0,0,.08);

  color:var(--ink);
  background:transparent;

  width:100%;
  max-width:none;
  margin:0;
  padding:0 20px 28px;

  font-family:"Inter","STIX Two Text",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Music",sans-serif;
}

/* ============================================================
   LAYOUT GERAL
============================================================ */
#cadencias-app .content{
  padding:20px 8px 0;
}

#cadencias-app .grid{
  width:100%;
  max-width:1600px;
  margin-inline:auto;

  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  margin-top:8px;
}

/* ============================================================
   PAINEL — TOOLTIP LATERAL (FECHADO POR DEFEITO)
============================================================ */
#cadencias-app .panel{
  position:fixed;
  top:90px;
  left:24px;
  z-index:9999;

  padding:12px 14px;
  margin:0;

  display:flex;
  align-items:flex-start;
  gap:14px;

  /* ⬇ fundo editorial */
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:12px;

  /* sombra muito contida (sem brilho) */
  box-shadow:0 4px 14px rgba(0,0,0,.06);

  /* estado fechado */
  transform:translateX(-120%);
  opacity:0;
  pointer-events:none;

  transition:
    transform .28s ease,
    opacity .2s ease;
}

/* estado aberto */
#cadencias-app.menu-open .panel{
  transform:translateX(0);
  opacity:1;
  pointer-events:auto;
}

/* ============================================================
   UI DO PAINEL — CONTROLOS EDITORIAIS (DISCRETO)
============================================================ */
#cadencias-app .panel-header{
  display:flex;
  flex-direction:column;
  gap:6px;

  width:max-content;
  padding:4px 0;

  background:transparent;
  border:none;
}

/* ============================================================
   LINHA 1 — PT / EN  +  BPM
============================================================ */
#cadencias-app .panel-header .toggle{
  display:flex;
  gap:6px;
  align-items:center;
}

#cadencias-app .panel-header .toggle button{
  padding:2px 8px;

  background:none;
  border:1px solid var(--line);
  border-radius:6px;

  font-size:16px;
  font-weight:600;
  color:var(--ink);

  cursor:pointer;
}

#cadencias-app .panel-header .toggle button.active{
  border-color:var(--accent2);
  background:var(--panel);
}

/* ============================================================
   LABEL BPM — FINAL DA LINHA
============================================================ */
#cadencias-app
.panel-header
.toggle[aria-label="Tempo"]::after{
  content:"BPM";
  margin-left:6px;

  font-size:16px;
  font-weight:600;
  letter-spacing:0.04em;
  color:var(--muted);
}

/* ============================================================
   LINHA 2 — TIPOS DE CADÊNCIA
============================================================ */
#cadencias-app .panel-header .tabs-toggle{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding-left:2px;
}

#cadencias-app .panel-header .tabs-toggle button{
  padding:0;

  background:none;
  border:none;

  font-size:16px;
  font-weight:700;
  color:var(--muted);

  cursor:pointer;
  text-align:left;
}

#cadencias-app .panel-header .tabs-toggle button.active{
  color:var(--ink);
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:4px;
}


/* ============================================================
   BOTÃO FLUTUANTE — TOGGLE DOCK (TOPO ESQUERDO)
============================================================ */
#cadencias-app #dock-toggle{
  position:fixed;
  top:48px;
  left:12px;
  z-index:10000;

  width:40px;
  height:40px;

  border-radius:50%;
  border:none;
  background:var(--accent2);
  color:#fff;

  font-size:20px;
  line-height:1;
  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;
}

#cadencias-app #dock-toggle:hover{
  transform:translateY(-1px);
}

#cadencias-app #dock-toggle:active{
  transform:translateY(0);
}

/* ============================================================
   BOTÃO TOCAR / PARAR
============================================================ */
#cadencias-app .playbar{
  display:flex;
  gap:10px;
  margin-top:10px;
  justify-content:flex-start;
}

#cadencias-app .playbar .btn{
  width:auto;
  padding:6px 10px;
  font-size:12px;
  font-weight:600;

  border-radius:8px;
  letter-spacing:0.04em;
  text-transform:uppercase;

  color:var(--ink);
  background:linear-gradient(
    to bottom,
    #fff,
    rgba(245,200,76,0.08)
  );

  border:1px solid var(--line);
  box-shadow:0 1px 3px rgba(0,0,0,.05);

  transition:
    background .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    transform .12s ease;
}

#cadencias-app .playbar .btn:hover{
  background:linear-gradient(
    to bottom,
    rgba(245,200,76,0.25),
    rgba(245,200,76,0.12)
  );
  border-color:var(--accent);
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  transform:translateY(-1px);
}

#cadencias-app .playbar .btn:active{
  transform:translateY(0);
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}

/* ============================================================
   DESCRIÇÕES
============================================================ */
#cadencias-app #tabDescBlock{
  margin:30px auto 20px;
  padding:10px 6px;
  text-align:center;
}

#cadencias-app #tabDescBlock p,
#cadencias-app #tabDescMain,
#cadencias-app #blurbConcl,
#cadencias-app #blurbInter{
  font-size:1.3em;
  font-weight:600;
  line-height:1.55;
  color:#222;
  text-align:center;
}

/* ============================================================
   CARTÕES
============================================================ */
#cadencias-app .card{
  display:grid;
  grid-template-columns: minmax(650px, 3.5fr) minmax(420px, 2fr);
  gap:28px;
  align-items:stretch;

  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
}

#cadencias-app .left,
#cadencias-app .text{
  min-width:0;
}

/* ============================================================
   MODO ALTERNATIVO
============================================================ */
#cadencias-app.text-first .card{
  grid-template-columns:
    minmax(420px, 2fr)   /* TEXTO */
    minmax(680px, 4fr);  /* ABC (MAIOR) */
}

#cadencias-app.text-first .text{ order:1; }
#cadencias-app.text-first .left{ order:2; }

/* ===========
   PARTITURA
============== */
#cadencias-app .score{
  min-height:180px;
  padding:8px 0;

  overflow-x:auto;
  overflow-y:hidden;

  display:flex;
  justify-content:center;
  align-items:flex-start;
}

#cadencias-app .score svg{
  width:auto !important;
  max-width:none !important;
  height:auto;
  display:block;
}

/* ============================================================
   TEXTO
============================================================ */
#cadencias-app .text{
  overflow:auto;
}

#cadencias-app .text h3{
  font-size:1.3em;
  font-weight:700;
  margin:32px 0 16px;
  padding:6px 0 6px 14px;

  border-left:5px solid var(--accent);
  background:linear-gradient(
    to right,
    rgba(18,179,182,0.08),
    transparent 70%
  );
}

#cadencias-app .text p{
  font-family:"STIX Two Text","Georgia","Times New Roman",serif;
  font-size:1.6em;
  line-height:1.6;
  color:#1a1a1a;
  margin:.45rem 0;
}

/* ============================================================
   RELAÇÃO HARMÓNICA (V → I, IV → I, etc.)
============================================================ */
#cadencias-app .rel{
  font-size: 1.25rem;     /* sobe aqui */
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin-bottom: 6px;
}

/* ============================================================
   ABC / AUDIO
============================================================ */
#cadencias-app .abcjs-lyric{
  transform:translate(8px,6px);
}

#cadencias-app .abcjs-inline-audio{
  transform:scale(1.2);
  transform-origin:left center;
  margin-top:6px;
}

#cadencias-app .abcjs-vname{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-weight:700;
  font-size:16px;
}

#cadencias-app .abcjs-annotation{
  font-weight:700;
  font-size:18px;
}

/* ============================================================
   SANDBOX
============================================================ */
#cadencias-app .hidden{
  position:absolute;
  left:-99999px;
  top:-99999px;
}

/* ============================================================
   MOBILE — PAINEL ANCORADO AO BOTÃO + ABC MAIOR
============================================================ */
@media (max-width: 900px){

  /* container geral */
  #cadencias-app{
    padding: 0 14px 22px;
  }

  /* ======================================================
     PAINEL — popover sob o botão
  ====================================================== */
  #cadencias-app .panel{
    position: fixed;
    top: 70px;              /* ↓ logo abaixo do botão */
    left: 16px;
    right: auto;

    width: max-content;
    max-width: calc(100vw - 32px);

    padding: 12px 14px;
    margin: 0;

    display: flex;
    align-items: flex-start;

    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 12px;

    box-shadow: 0 6px 18px rgba(0,0,0,.08);

    /* fechado */
    transform: translateY(-6px);
    opacity: 0;
    pointer-events: none;

    transition:
      transform .22s ease,
      opacity .18s ease;
  }

  /* aberto */
  #cadencias-app.menu-open .panel{
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* ======================================================
     CONTEÚDO DO PAINEL
  ====================================================== */
  #cadencias-app .panel-header{
    width: max-content;
    max-width: 100%;

    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* ======================================================
     LINHA 1 — PT / EN + BPM
  ====================================================== */
  #cadencias-app .panel-header .toggle{
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
  }

  #cadencias-app .panel-header .toggle button{
    padding: 6px 10px;
    font-size: 15px;
    border-radius: 8px;
  }

  #cadencias-app
  .panel-header
  .toggle[aria-label="Tempo"]::after{
    content: "BPM";
    margin-left: 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
  }

  /* ======================================================
     LINHA 2 — TIPOS DE CADÊNCIA
  ====================================================== */
  #cadencias-app .panel-header .tabs-toggle{
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  #cadencias-app .panel-header .tabs-toggle button{
    font-size: 15px;
  }

  /* ======================================================
     BOTÃO DOCK
  ====================================================== */
  #cadencias-app #dock-toggle{
    width: 44px;
    height: 44px;
    font-size: 18px;
  }

  /* ======================================================
     CARTÕES — uma coluna
  ====================================================== */
  #cadencias-app .card{
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  #cadencias-app .text{ order: 2; }
  #cadencias-app .left{ order: 1; }
	
  /* ======================================================
     TEXTO
  ====================================================== */
  #cadencias-app .text p{
    font-size: 1.05rem;
    line-height: 1.55;
  }

  #cadencias-app .rel{
    font-size: 0.95rem;
  }

/* segurança geral */
#cadencias-app{
  max-width: 100%;
  overflow-x: hidden;
}

/* libertar a música */
#cadencias-app .score{
  overflow-x: auto;
}

#cadencias-app .score svg{
  max-width: none !important;
}
}