html,body{
    margin:0;
    padding:0;
    min-height:100vh;
    background:#141416;
    color-scheme:dark;
  }

  .triada-app{
    --bg: #1c1c1e;
    --surface-1: #262629;
    --surface-2: #f4f1ea;
    --text-primary: #ededed;
    --text-secondary: #9a9a9f;
    --border: #3a3a3d;
    --border-strong: #6d6d73;
    --fill-secondary-hover: #34343a;

    box-sizing:border-box;
    max-width:600px;
    margin:72px auto 24px;
    padding:28px 26px 24px;
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:16px;
    box-shadow:0 12px 40px rgba(0,0,0,.45);
    color:var(--text-primary);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  }
  .triada-app *{box-sizing:border-box;}

  .triada-app select,
  .triada-app .type-buttons button,
  .triada-app .pill-btn{
    appearance:none;
    background:var(--surface-1);
    color:var(--text-primary);
    border:1px solid var(--border);
    border-radius:8px;
    padding:7px 12px;
    font-family:inherit;
    font-size:13px;
    line-height:1.2;
    cursor:pointer;
    transition:background .15s,border-color .15s,transform .05s;
  }
  .triada-app select:hover,
  .triada-app .type-buttons button:hover,
  .triada-app .pill-btn:hover{
    background:var(--fill-secondary-hover);
    border-color:var(--border-strong);
  }
  .triada-app select:focus-visible,
  .triada-app .type-buttons button:focus-visible,
  .triada-app .pill-btn:focus-visible{
    outline:2px solid #BA7517;
    outline-offset:1px;
  }
  .triada-app .type-buttons button:active,
  .triada-app .pill-btn:active{transform:translateY(1px);}
  .triada-app .type-buttons button:disabled{
    opacity:.38;
    cursor:not-allowed;
  }
  .triada-app .type-buttons button:disabled:hover{
    background:var(--surface-1);
    border-color:var(--border);
  }
  .triada-app .pill-btn[aria-pressed="true"]{
    background:var(--fill-secondary-hover);
    border-color:var(--border-strong);
  }

  .triada-app .type-group{
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
  }
  .triada-app .type-group-label{
    min-width:58px;
    font-size:11px;
    font-weight:600;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:#6d6d73;
  }

  /* Tempo: deslizador de pulsaciones por minuto. El pulgar lleva el ámbar de
     la tónica, que es el color con el que la app señala «esto es lo que
     mueves». */
  .triada-app input[type="range"]{
    appearance:none;
    -webkit-appearance:none;
    width:108px;
    height:18px;
    margin:0;
    background:transparent;
    cursor:pointer;
  }
  .triada-app input[type="range"]::-webkit-slider-runnable-track{
    height:4px;
    border-radius:2px;
    background:var(--border);
  }
  .triada-app input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:14px;
    height:14px;
    margin-top:-5px;
    border:0;
    border-radius:50%;
    background:#F0B759;
  }
  .triada-app input[type="range"]::-moz-range-track{
    height:4px;
    border-radius:2px;
    background:var(--border);
  }
  .triada-app input[type="range"]::-moz-range-thumb{
    width:14px;
    height:14px;
    border:0;
    border-radius:50%;
    background:#F0B759;
  }
  .triada-app input[type="range"]:focus-visible{
    outline:2px solid #BA7517;
    outline-offset:3px;
    border-radius:4px;
  }
  .triada-app .bpm-val{
    min-width:58px;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:12px;
    color:var(--text-secondary);
  }

  .triada-app .piano-board{
    background:var(--surface-1);
    border:1px solid var(--border);
    border-radius:10px;
    padding:12px 0 0;
    overflow:hidden;
  }
  /* Teclado de dos octavas: con 37 teclas hay anchos en los que no cabe ni
     encogiendo, y recortar escondería justo las notas agudas de la segunda
     octava. Se desplaza, como en Arpegios. */
  .triada-app .piano-board.board-ancho{
    overflow-x:auto;
    overflow-y:hidden;
  }
  /* El foco va por dentro: .piano-board recorta, y un outline por fuera se
     perdería justo en las teclas de los extremos. */
  .triada-app .piano-key:focus-visible{
    outline:2px solid #BA7517;
    outline-offset:-2px;
  }
  .triada-app .divider-top{
    margin-top:8px;
    padding-top:10px;
    border-top:1px solid var(--border);
  }

  .triada-app .chord-chips{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:6px;
  }
  .triada-app .chord-chip{
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    gap:1px;
    min-width:54px;
    padding:5px 8px;
    background:var(--surface-1);
    color:var(--text-primary);
    border:1px solid var(--border);
    border-bottom-width:2px;
    border-radius:8px;
    font-family:inherit;
    font-size:12px;
    line-height:1.25;
    cursor:pointer;
    transition:background .15s,border-color .15s,transform .05s;
  }
  .triada-app .chord-chip:hover{
    background:var(--fill-secondary-hover);
    border-color:var(--border-strong);
  }
  .triada-app .chord-chip:active{transform:translateY(1px);}
  .triada-app .chord-chip:focus-visible{
    outline:2px solid #BA7517;
    outline-offset:1px;
  }
  .triada-app .chord-chip .rom{
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:10px;
    letter-spacing:.04em;
    color:#6d6d73;
  }

  .triada-app.size-pequeno{max-width:600px;}
  .triada-app.size-mediano{max-width:820px;}
  .triada-app.size-grande{max-width:min(1180px, calc(100vw - 32px));}

  #size-switcher{
    position:fixed;
    top:16px;
    right:16px;
    z-index:20;
    display:inline-flex;
    gap:2px;
    padding:3px;
    background:#262629;
    border:1px solid #3a3a3d;
    border-radius:10px;
    box-shadow:0 6px 20px rgba(0,0,0,.35);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  }
  #size-switcher button{
    appearance:none;
    background:transparent;
    color:#9a9a9f;
    border:0;
    border-radius:7px;
    padding:6px 12px;
    font-size:13px;
    line-height:1.2;
    cursor:pointer;
    transition:background .15s,color .15s;
  }
  #size-switcher button:hover{color:#ededed;}
  #size-switcher button[aria-pressed="true"]{
    background:#34343a;
    color:#ededed;
  }
  #size-switcher button:focus-visible{
    outline:2px solid #BA7517;
    outline-offset:1px;
  }

  .cheatsheet{
    box-sizing:border-box;
    max-width:600px;
    margin:0 auto 48px;
    padding:14px 18px;
    background:#1c1c1e;
    border:1px solid #3a3a3d;
    border-radius:12px;
    color:#9a9a9f;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:12px;
  }
  .cheatsheet *{box-sizing:border-box;}
  .cheatsheet h3{
    margin:0 0 10px;
    font-size:11px;
    font-weight:600;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:#6d6d73;
  }
  .cheatsheet ul{
    display:flex;
    flex-wrap:wrap;
    gap:8px 20px;
    margin:0;
    padding:0;
    list-style:none;
  }
  .cheatsheet li{
    display:flex;
    align-items:center;
    gap:8px;
    line-height:1.3;
  }
  .cheatsheet kbd{
    display:inline-block;
    min-width:20px;
    padding:2px 6px;
    background:#262629;
    border:1px solid #3a3a3d;
    border-bottom-width:2px;
    border-radius:5px;
    color:#ededed;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:11px;
    line-height:1.4;
    text-align:center;
  }

  #sidenav{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    width:208px;
    z-index:30;
    display:flex;
    flex-direction:column;
    gap:2px;
    padding:22px 12px;
    background:#1c1c1e;
    border-right:1px solid #3a3a3d;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  }
  #sidenav .nav-brand{
    margin:0 0 14px;
    padding:0 10px;
    font-size:11px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#6d6d73;
  }
  #sidenav button{
    appearance:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    width:100%;
    background:transparent;
    color:#9a9a9f;
    border:0;
    border-radius:8px;
    padding:9px 10px;
    font-family:inherit;
    font-size:14px;
    line-height:1.2;
    text-align:left;
    cursor:pointer;
    transition:background .15s,color .15s;
  }
  #sidenav button:hover{background:#262629;color:#ededed;}
  #sidenav button[aria-current="page"]{background:#34343a;color:#ededed;}
  #sidenav button:focus-visible{
    outline:2px solid #BA7517;
    outline-offset:1px;
  }
  #sidenav .nav-tag{
    font-size:10px;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:#6d6d73;
  }

  #page{padding-left:208px;}
  .view{display:none;}
  .view.is-active{display:block;}

  .view-empty{
    box-sizing:border-box;
    max-width:600px;
    margin:120px auto;
    padding:44px 24px;
    background:#1c1c1e;
    border:1px dashed #3a3a3d;
    border-radius:14px;
    text-align:center;
    color:#6d6d73;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:13px;
  }
  .view-empty h2{
    margin:0 0 8px;
    font-size:18px;
    font-weight:600;
    color:#ededed;
  }

  /* La documentación es la única sección con dos columnas: su propio menú a la
     izquierda y una página cada vez a la derecha. La tarjeta se ensancha lo que
     ocupa el menú, para que el texto siga midiendo lo mismo que antes. */
  .doc-app{max-width:988px;}
  .doc-layout{
    display:flex;
    align-items:flex-start;
    gap:32px;
  }
  .doc-nav{
    position:sticky;
    top:22px;
    flex:0 0 180px;
    display:flex;
    flex-direction:column;
    gap:2px;
  }
  .doc-nav-tit{
    margin:0 0 6px;
    padding:0 10px;
    font-size:11px;
    font-weight:600;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:#6d6d73;
  }
  .doc-nav button + .doc-nav-tit{margin-top:20px;}
  .doc-nav button{
    appearance:none;
    width:100%;
    background:transparent;
    color:var(--text-secondary);
    border:0;
    border-radius:8px;
    padding:8px 10px;
    font-family:inherit;
    font-size:13px;
    line-height:1.3;
    text-align:left;
    cursor:pointer;
    transition:background .15s,color .15s;
  }
  .doc-nav button:hover{background:var(--surface-1);color:var(--text-primary);}
  .doc-nav button[aria-current="page"]{
    background:var(--fill-secondary-hover);
    color:var(--text-primary);
  }
  .doc-nav button:focus-visible{outline:2px solid #BA7517;outline-offset:1px;}

  /* min-width:0 para que las tablas anchas se desplacen dentro de .doc-scroll
     en vez de estirar la columna y descuadrar el menú. */
  .doc-body{flex:1;min-width:0;max-width:760px;}
  .doc-page{display:none;}
  .doc-page.is-active{display:block;}

  .doc-app h2{
    margin:0 0 6px;
    font-size:19px;
    font-weight:600;
    color:var(--text-primary);
  }
  .doc-app .doc-sub{
    margin:0 0 22px;
    font-size:13px;
    color:var(--text-secondary);
  }
  .doc-app h3{
    margin:26px 0 8px;
    font-size:11px;
    font-weight:600;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:#6d6d73;
  }
  .doc-app p{
    margin:0 0 10px;
    font-size:13px;
    line-height:1.55;
    color:var(--text-primary);
  }
  .doc-app ol,
  .doc-app ul{
    margin:0 0 10px;
    padding-left:20px;
    font-size:13px;
    line-height:1.55;
    color:var(--text-primary);
  }
  .doc-app li{margin-bottom:5px;}
  .doc-app strong{font-weight:600;}
  .doc-app .doc-nota{
    margin:0 0 10px;
    padding:10px 14px;
    background:var(--surface-1);
    border-left:3px solid #BA7517;
    border-radius:0 8px 8px 0;
    font-size:12px;
    line-height:1.5;
    color:var(--text-secondary);
  }
  .doc-app table{
    width:100%;
    margin:0 0 10px;
    border-collapse:collapse;
    font-size:12px;
    line-height:1.5;
  }
  .doc-app th,
  .doc-app td{
    padding:8px 10px;
    text-align:left;
    vertical-align:top;
    border-bottom:1px solid var(--border);
    color:var(--text-primary);
  }
  .doc-app th{
    font-size:11px;
    font-weight:600;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:#6d6d73;
  }
  .doc-app .doc-scroll{overflow-x:auto;}
  /* un salto dentro de una frase se lee como parte de la frase */
  .doc-app p .link-btn{font-size:inherit;padding:0;}

  .ej{
    margin:0 0 14px;
    padding:14px;
    background:var(--surface-1);
    border:1px solid var(--border);
    border-radius:10px;
  }
  .ej-tit{
    margin-bottom:10px;
    font-size:11px;
    font-weight:600;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:#6d6d73;
  }
  .ej-fila{
    display:flex;
    align-items:flex-end;
    gap:10px;
    overflow-x:auto;
    padding-bottom:2px;
  }
  .ej-g{
    display:flex;
    gap:2px;
    padding:6px;
    border:1px dashed var(--border-strong);
    border-radius:8px;
  }
  .ej-n{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:3px;
    min-width:42px;
    padding:6px 4px;
    background:var(--surface-2);
    border-radius:0 0 4px 4px;
    color:#331C02;
    font-size:11px;
    font-weight:500;
    white-space:nowrap;
  }
  .ej-n.negra{
    background:#2C2C2A;
    color:var(--surface-2);
  }
  .ej-n i{
    display:inline-block;
    min-width:16px;
    padding:0 3px;
    border-radius:999px;
    background:rgba(0,0,0,.22);
    font-size:10px;
    font-style:normal;
    font-weight:700;
    line-height:16px;
    text-align:center;
  }
  .ej-n.negra i{background:rgba(255,255,255,.18);}
  .ej-n.pulgar{outline:2px solid #F0B759;outline-offset:1px;}
  .ej-pie{
    margin-top:10px;
    font-size:12px;
    line-height:1.5;
    color:var(--text-secondary);
  }

  /* Mapa de conceptos (primera página de la documentación). El dibujo es un SVG
     escrito a mano dentro del HTML, como el resto del texto de la sección: no
     depende de nada y se corrige donde se lee.
     Va dentro de un .ej, cuyo fondo ya es --surface-1; por eso las cajas se
     pintan con --bg, que es lo único que contrasta ahí dentro. */
  .mapa-svg{
    display:block;
    width:100%;
    /* por debajo de este ancho las etiquetas dejan de leerse: antes que encoger
       el dibujo, que se desplace dentro de .doc-scroll */
    min-width:600px;
    height:auto;
    font-family:inherit;
  }
  .mapa-caja{
    fill:var(--bg);
    stroke:var(--border-strong);
    stroke-width:1;
  }
  .mapa-nodo{cursor:pointer;}
  .mapa-nodo:hover .mapa-caja{fill:var(--fill-secondary-hover);}
  /* el foco se marca en la caja, no alrededor del grupo: un outline sobre un
     <g> lo dibuja el navegador donde quiere */
  .mapa-nodo:focus{outline:none;}
  .mapa-nodo:focus-visible .mapa-caja{stroke:#BA7517;stroke-width:2;}
  .mapa-tit{fill:var(--text-primary);font-size:13px;font-weight:600;}
  .mapa-sub{fill:var(--text-secondary);font-size:11px;}
  .mapa-etiq{fill:var(--text-secondary);font-size:10.5px;}
  .mapa-linea{fill:none;stroke:var(--border-strong);stroke-width:1.4;}
  .mapa-punta{fill:var(--border-strong);}
  .mapa-sep{stroke:var(--border);stroke-width:1;}

  .link-btn{
    appearance:none;
    background:none;
    border:0;
    padding:2px;
    color:var(--text-secondary);
    font-family:inherit;
    font-size:11px;
    text-decoration:underline;
    cursor:pointer;
  }
  .link-btn:hover{color:var(--text-primary);}
  .link-btn:focus-visible{outline:2px solid #BA7517;outline-offset:1px;border-radius:4px;}

  /* Sin sitio para dos columnas, el menú de la documentación se pone encima del
     texto y en fila, como hace el de secciones al estrecharse la ventana. */
  @media (max-width:1000px){
    /* apiladas, las dos filas ocupan el ancho: con flex-start el texto se
       estiraría hasta lo que mida su línea más larga y se saldría de la tarjeta */
    .doc-layout{flex-direction:column;align-items:stretch;gap:20px;}
    .doc-nav{
      position:static;
      flex:none;
      width:100%;
      flex-direction:row;
      flex-wrap:wrap;
      gap:4px;
      padding-bottom:18px;
      border-bottom:1px solid var(--border);
    }
    .doc-nav-tit{flex-basis:100%;margin:0;padding:0;}
    .doc-nav button + .doc-nav-tit{margin-top:12px;}
    .doc-nav button{
      width:auto;
      padding:6px 10px;
      background:var(--surface-1);
      font-size:12px;
    }
  }

  @media (max-width:760px){
    #sidenav{
      position:static;
      width:auto;
      flex-direction:row;
      align-items:center;
      gap:4px;
      padding:10px;
      overflow-x:auto;
      border-right:0;
      border-bottom:1px solid #3a3a3d;
    }
    #sidenav .nav-brand{display:none;}
    #sidenav button{width:auto;white-space:nowrap;}
    #sidenav .nav-tag{display:none;}
    #page{padding-left:0;}
    #size-switcher{
      position:static;
      margin:14px auto 0;
      width:max-content;
    }
    .triada-app{margin-top:20px;}
    .view-empty{margin:56px auto;}
    .doc-app{margin-top:20px;}
    /* en pantalla estrecha el círculo agradece cada píxel de ancho */
    .circulo-app{padding-left:12px;padding-right:12px;}
  }

/* Pentagrama (SVG generado por VexFlow) */
.staff-board{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
}
.staff-board svg{
  display:block;
  margin:0 auto;
}


/* Arpegios (js/arpegios.js) */
/* El teclado tiene 37 teclas en vez de 25, así que la tarjeta pequeña se ensancha
   un poco: con 22 teclas blancas repartidas en 600px las teclas bajan de 22px y
   los nombres empiezan a no caber. */
.arpegio-app.size-pequeno{max-width:680px;}
/* Con 22 teclas blancas hay anchos de pantalla en los que el teclado no cabe ni
   encogiendo (applySize no baja de 18px por tecla). El resto de la app recorta
   —.piano-board lleva overflow:hidden— y aquí eso escondería las notas agudas
   del arpegio, que son justo las que hay que ver. Así que aquí se desplaza,
   igual que hace el pentagrama. */
.arpegio-app .piano-board{
  overflow-x:auto;
  overflow-y:hidden;
}

.triada-app .arp-secuencia{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px;
}
.triada-app .arp-chip{
  display:inline-flex;
  align-items:baseline;
  gap:5px;
  min-width:52px;
  padding:5px 9px;
  background:var(--surface-1);
  color:var(--text-primary);
  border:1px solid var(--border);
  border-bottom-width:3px;
  border-radius:8px;
  font-size:12px;
  line-height:1.25;
  transition:background .12s,border-color .12s,transform .08s;
}
/* La ficha que suena en este instante: el mismo naranja del pulso del teclado,
   para que los dos sitios digan lo mismo a la vez. */
.triada-app .arp-chip.is-on{
  background:var(--fill-secondary-hover);
  border-color:#BA7517;
  transform:translateY(-2px);
}
.triada-app .arp-chip-n{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:10px;
  color:#6d6d73;
}

/* Progresiones (js/progresiones.js) */
/* Mismo teclado de 37 teclas que Arpegios, y por lo mismo: la tarjeta pequeña se
   ensancha y el teclado se desplaza en vez de recortar. Aquí recortar escondería
   el bajo de la mano izquierda, que está en el extremo grave. */
.progresion-app.size-pequeno{max-width:680px;}
.progresion-app .piano-board{
  overflow-x:auto;
  overflow-y:hidden;
}
/* La ficha del acorde que se está mirando: el borde fuerte, sin color, porque
   el color ya lo lleva la que suena. */
.triada-app .chord-chip.is-sel{
  background:var(--fill-secondary-hover);
  border-color:var(--border-strong);
}
/* La que suena en este instante: el mismo naranja del pulso del teclado y de
   las fichas de Arpegios, para que los tres sitios digan lo mismo a la vez. */
.triada-app .chord-chip.is-on{
  background:var(--fill-secondary-hover);
  border-color:#BA7517;
  transform:translateY(-2px);
}

/* Círculo de quintas (SVG generado en js/circulo.js) */
.circulo-app{max-width:560px;}
.circulo-board{
  width:100%;
  margin:0 auto;
}
.circulo-board svg{
  display:block;
  width:100%;
  height:auto;
  max-width:440px;
  margin:0 auto;
  font-family:inherit;
}
/* El panel de la tonalidad marcada. Aparece debajo del círculo al pulsar un
   sector y no mueve el dibujo: ocupa el sitio que ya había entre el círculo y
   la leyenda. */
.circulo-app .circulo-sel{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px 12px;
  margin:10px auto 2px;
  padding:10px 14px;
  background:var(--surface-1);
  border:1px solid var(--border);
  border-radius:10px;
  font-size:13px;
  color:var(--text-primary);
}
.circulo-app .circulo-sel[hidden]{display:none;}
.circulo-app .circulo-sel-acciones{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
/* El sector marcado ya se distingue por el borde ámbar; esto es solo el foco
   del teclado, que en SVG no lo pinta el navegador por su cuenta. */
.circulo-board [role="button"]:focus-visible{
  outline:2px solid #BA7517;
  outline-offset:2px;
}

.circulo-app .circulo-leyenda{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  margin-top:6px;
  font-size:12px;
  color:var(--text-secondary);
}
.circulo-app .circulo-leyenda .sw{
  display:inline-block;
  width:10px;
  height:10px;
  margin-right:5px;
  vertical-align:middle;
  border-radius:3px;
  border:1px solid var(--border-strong);
}
.circulo-app .sw-sost{background:rgba(111,199,172,.30);}
.circulo-app .sw-bem{background:rgba(240,183,89,.30);}
.circulo-app .sw-enar{background:rgba(168,150,222,.30);}
/* la muestra de la flecha se dibuja como línea, no como cuadro */
.circulo-app .circulo-leyenda .sw-arco{
  width:22px;
  height:3px;
  border:0;
  border-radius:2px;
  background:linear-gradient(90deg,rgb(240,183,89),rgb(111,199,172));
}
.circulo-app .circulo-pie{
  margin-top:14px;
  font-size:12.5px;
  line-height:1.55;
  color:var(--text-secondary);
}
.circulo-app .circulo-pie p{margin:0 0 7px;}
.circulo-app .circulo-pie strong{
  font-weight:600;
  color:var(--text-primary);
}
.circulo-app .circulo-nota{
  margin-top:10px;
  padding:9px 11px;
  background:var(--surface-1);
  border-left:2px solid var(--border-strong);
  border-radius:0 8px 8px 0;
  font-size:12px;
  color:#8f8f95;
}