/* =========================================================
🎵 FONTES LOCAIS — Noto Music
========================================================= */

@font-face{
  font-family:"Noto Music";
  src:url("https://linoguerreiro.com/wp-content/uploads/2025/10/NotoMusic-Regular.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}


/* =========================================================
VARIÁVEIS
========================================================= */

#talea-app{

  --bg:#ffffff;
  --panel:#ffffff;

  --ink:#0e1720;
  --muted:#5b6570;
  --line:#e6ebf0;

  --accent:#F5C84C;

  --ok:#16a34a;
  --danger:#ef4444;

  --radius:16px;

  --shadow:0 2px 6px rgba(0,0,0,.06);
  --shadow-soft:0 8px 24px rgba(0,0,0,.06);

  --glyph-size:28px;
  --glyph-size-lg:32px;

  --chip-pad-y:3px;
  --chip-pad-x:8px;

  background:var(--bg);
  color:var(--ink);
}


/* =========================================================
BASE
========================================================= */

#talea-app,
#talea-app *{
  box-sizing:border-box;
}

#talea-app{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px;
  line-height:1.5;
}

#talea-app *{
  color:var(--ink);
}

#talea-app input,
#talea-app select,
#talea-app button{
  font-family:inherit;
}


/* =========================================================
LAYOUT
========================================================= */

#talea-app .wrap{
  width:100%;
  margin:0;
  padding:20px 14px 40px;
}

#talea-app .row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}


/* =========================================================
PAINÉIS
========================================================= */

#talea-app .panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;

  box-shadow:var(--shadow);

  display:flex;
  flex-direction:column;
  gap:12px;

  min-width:0;
}

#talea-app .panel-emph{
  position:relative;
  background:#fffef7;
  border:1px solid #f2dfab;
}

#talea-app .panel-emph::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 2px rgba(245,200,76,.18);
}

#talea-app .panel-emph>.row:first-child>label{
  display:inline-block;
  padding:6px 12px;
  border:1px solid #f0d27c;
  background:#fff6d2;
  border-radius:10px;
  font-weight:800;
  letter-spacing:.01em;
}


/* =========================================================
FORMULÁRIOS
========================================================= */

#talea-app label{
  font-weight:700;
}

#talea-app select,
#talea-app input[type="number"]{

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

  padding:8px 12px;
  font-size:15px;

  background:#fff;

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

#talea-app select:focus,
#talea-app input:focus{

  outline:none;
  border-color:var(--accent);

  box-shadow:
  0 0 0 3px rgba(245,200,76,.25);
}

#talea-app .hidden{
  display:none;
}


/* =========================================================
BOTÕES
========================================================= */

#talea-app .btn{

  background:var(--accent);
  color:#111;

  border:none;
  border-radius:12px;

  padding:10px 14px;

  font-weight:800;

  cursor:pointer;

  box-shadow:var(--shadow);

  transition:
  transform .08s ease,
  box-shadow .12s ease,
  filter .12s ease;
}

#talea-app .btn:hover{
  filter:brightness(1.03);
}

#talea-app .btn:active{
  transform:translateY(1px);
}

#talea-app .btn-play{
  background:var(--ok);
  color:#fff;
}

#talea-app .btn-play.playing{
  background:var(--danger);
}


/* =========================================================
TOGGLES
========================================================= */

#talea-app .toggle{
  border:1px solid var(--line);
  border-radius:999px;

  padding:4px;
  background:#fff;

  display:flex;
  gap:6px;
}

#talea-app .tbtn{

  background:transparent;
  border:none;

  border-radius:999px;

  padding:8px 14px;

  font-weight:800;

  cursor:pointer;

  font-size:16px;
  line-height:1;
}

#talea-app .tbtn.active{
  background:var(--accent);
}


/* =========================================================
COMPASSO
========================================================= */

#talea-app .meter{

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

  padding:4px;

  background:#fff;

  display:flex;
  gap:8px;
}

#talea-app .meter-btn{

  width:48px;
  height:52px;

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

  background:#fff;

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

  cursor:pointer;

  font-weight:800;
}

#talea-app .meter-btn.active{
  background:var(--accent);
}

#talea-app .meter-frac{
  display:flex;
  flex-direction:column;
  line-height:1;
  align-items:center;
}

#talea-app .meter-frac .num{
  font-size:18px;
  transform:translateY(2px);
}

#talea-app .meter-frac .den{
  font-size:18px;
  transform:translateY(-2px);
}


/* =========================================================
CHIPS
========================================================= */

#talea-app .chips{

  position:relative;

  display:flex;
  flex-wrap:wrap;

  gap:10px;

  padding:10px;

  border:1px dashed var(--line);
  border-radius:14px;

  background:#f8fafc;

  min-height:56px;
}

#talea-app .chip{

  background:#fff;

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

  display:flex;
  align-items:center;

  gap:8px;

  padding:var(--chip-pad-y) var(--chip-pad-x);

  cursor:default;
  user-select:none;

  font-size:10px;
  line-height:1.2;
}

#talea-app .chip .del{

  border:none;

  background:#00000012;

  color:#111;

  width:24px;
  height:24px;

  border-radius:8px;

  cursor:pointer;

  font-weight:800;

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

  font-size:20px;
}

#talea-app .chip .del:active{
  transform:translateY(1px);
}


/* =========================================================
ÍCONES RÍTMICOS
========================================================= */

#talea-app .mu{

  font-family:"Noto Music",system-ui,sans-serif;

  display:inline-flex;
  vertical-align:middle;

  line-height:1;

  font-feature-settings:"liga";
}

#talea-app .mu.sm{
  font-size:var(--glyph-size);
}

#talea-app .mu.lg{
  font-size:var(--glyph-size-lg);
}

#talea-app .mu .dot{
  position:relative;
  top:.20em;
  margin-left:.18ch;
  font-size:.9em;
}

#talea-app .mu.sm .dot{top:.22em;}
#talea-app .mu.lg .dot{top:.26em;}


/* =========================================================
GRELHA TALEA
========================================================= */

#talea-app .talea-grid{

  display:grid;

  grid-auto-flow:column;
  grid-auto-columns:56px;

  grid-template-columns:repeat(7,56px);

  gap:12px;

  justify-content:center;
  justify-items:center;
}

#talea-app .sqbtn{

  width:56px;
  height:56px;

  border:1px solid var(--line);
  border-radius:14px;

  background:#fff;

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

  cursor:pointer;

  box-shadow:var(--shadow);

  font-weight:700;

  transition:transform .08s ease;
}

#talea-app .sqbtn:active{
  transform:translateY(1px);
}


/* =========================================================
TECLADO
========================================================= */

#talea-app .kb-wrap{

  position:relative;

  width:100%;

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

  padding:12px;

  border:1px dashed var(--line);
  border-radius:14px;

  background:#f8fafc;

  display:flex;
  justify-content:center;

  z-index:0;
}

#talea-app .keys{

  position:relative;

  height:176px;

  user-select:none;

  margin:0 auto;

  touch-action:manipulation;
}

#talea-app .white{

  position:absolute;

  width:36px;
  height:176px;

  border:1px solid #d9dee3;

  border-bottom-left-radius:6px;
  border-bottom-right-radius:6px;

  background:#fff;

  box-shadow:inset 0 -2px 0 rgba(0,0,0,.05);

  cursor:pointer;
}

#talea-app .white:active{
  filter:brightness(.97);
}

#talea-app .white.pressed{

  box-shadow:inset 0 -4px 0 rgba(0,0,0,.08);

  filter:brightness(.98);
}

#talea-app .black{

  position:absolute;

  width:24px;
  height:112px;

  background:#111;

  border-radius:0 0 4px 4px;

  top:0;

  box-shadow:inset 0 -2px 0 rgba(255,255,255,.06);

  cursor:pointer;
}

#talea-app .black:active{
  filter:brightness(1.15);
}

#talea-app .black.pressed{
  filter:brightness(1.2);
}

#talea-app .label-note{

  position:absolute;

  bottom:8px;
  left:0;
  right:0;

  text-align:center;

  font-size:11px;

  color:#444;

  pointer-events:none;
}


/* =========================================================
PARTITURA
========================================================= */

#talea-app #score{
  text-align:center;
}

#talea-app #score .abcjs-container{
  display:inline-block;
  max-width:100%;
}

#talea-app #score svg{

  width:100%;
  height:auto;

  display:block;

  margin:0 auto;
}


/* =========================================================
DUAS COLUNAS
========================================================= */

#talea-app .two-col{

  display:grid;

  grid-template-columns:repeat(2,minmax(0,1fr));

  gap:16px;

  align-items:stretch;

  width:100%;
}

#talea-app .two-col .panel{
  height:100%;
  min-width:0;
}

/* =========================================================
DROPDOWNS
========================================================= */

#talea-app select{

  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;

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

  padding:8px 36px 8px 12px;

  font-size:15px;
  font-weight:600;

  background:#fff;

  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20'%3E%3Cpath fill='%235b6570' d='M5.5 7l4.5 5 4.5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;

  cursor:pointer;

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


/* hover */

#talea-app select:hover{
  border-color:#d6dde5;
}


/* focus */

#talea-app select:focus{

  outline:none;

  border-color:var(--accent);

  box-shadow:
  0 0 0 3px rgba(245,200,76,.25);
}


/* disabled */

#talea-app select:disabled{
  opacity:.6;
  cursor:not-allowed;
}


/* =========================================================
RESPONSIVE
========================================================= */

@media (max-width:900px){

  #talea-app .two-col{
    grid-template-columns:1fr;
  }

}

@media (max-width:600px){

  #talea-app .talea-grid{

    grid-auto-flow:row;

    grid-template-columns:repeat(7,minmax(0,1fr));

    gap:6px;

    padding:0 2px;
  }

  #talea-app .sqbtn{
    width:100%;
    aspect-ratio:1/1;
    border-radius:12px;
  }

  #talea-app .chips{
    padding:8px;
    gap:8px;
    max-width:100%;
    overflow:hidden;
  }

  #talea-app #taleaChips .mu.sm{
    font-size:22px;
  }

  #talea-app #taleaChips .mu.lg{
    font-size:26px;
  }

  #talea-app #taleaChips .chip{
    flex:0 1 auto;
    max-width:100%;
  }

  #talea-app #taleaChips .chip .del{
    width:22px;
    height:22px;
    font-size:18px;
  }

}