/* Estructura tabla */
table{width:100%;border-collapse:collapse}
th,td{border:1px solid var(--border);padding:6px 8px;text-align:center}
thead th{background:#0e141b;color:#cbd5e1}
thead tr.subhead th{background:#0c1218;color:#9fb2c8}
td.name{text-align:left}
td.idx{width:48px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* Encabezados: colorear la columna 0 de cada grupo */
thead tr:nth-child(2) th:nth-child(5){background: color-mix(in oklab, var(--col-root) 40%, transparent)}
thead tr:nth-child(2) th:nth-child(10){background: color-mix(in oklab, var(--col-third) 40%, transparent)}
thead tr:nth-child(2) th:nth-child(15){background: color-mix(in oklab, var(--col-fifth) 40%, transparent)}
/* Encabezados laterales suaves */
thead tr:nth-child(2) th:nth-child(3),
thead tr:nth-child(2) th:nth-child(4),
thead tr:nth-child(2) th:nth-child(6),
thead tr:nth-child(2) th:nth-child(7){background: color-mix(in oklab, var(--col-root) 15%, transparent)}
thead tr:nth-child(2) th:nth-child(8),
thead tr:nth-child(2) th:nth-child(9),
thead tr:nth-child(2) th:nth-child(11),
thead tr:nth-child(2) th:nth-child(12){background: color-mix(in oklab, var(--col-third) 15%, transparent)}
thead tr:nth-child(2) th:nth-child(13),
thead tr:nth-child(2) th:nth-child(14),
thead tr:nth-child(2) th:nth-child(16),
thead tr:nth-child(2) th:nth-child(17){background: color-mix(in oklab, var(--col-fifth) 15%, transparent)}

/* Cuerpo: pintar SOLO celdas con nota; laterales vacíos al fondo */
td.note-root  { background: color-mix(in oklab, var(--col-root) 40%, transparent) !important; }
td.note-third { background: color-mix(in oklab, var(--col-third) 40%, transparent) !important; }
td.note-fifth { background: color-mix(in oklab, var(--col-fifth) 40%, transparent) !important; }
td.side-empty { background: var(--bg) !important; }

/* celdas con nota */
td.note-root  { background: color-mix(in oklab, var(--col-root) 40%, transparent) !important; }
td.note-third { background: color-mix(in oklab, var(--col-third) 40%, transparent) !important; }
td.note-fifth { background: color-mix(in oklab, var(--col-fifth) 40%, transparent) !important; }

/* vecinos de ±2 → pintar también ±1 (suave) */
td.near-root  { background: color-mix(in oklab, var(--col-root) 18%, transparent) !important; }
td.near-third { background: color-mix(in oklab, var(--col-third) 18%, transparent) !important; }
td.near-fifth { background: color-mix(in oklab, var(--col-fifth) 18%, transparent) !important; }

/* laterales vacíos */
td.side-empty { background: var(--bg) !important; }

td.center-root  { background: color-mix(in oklab, var(--col-root) 25%, transparent) !important; }
td.center-third { background: color-mix(in oklab, var(--col-third) 25%, transparent) !important; }
td.center-fifth { background: color-mix(in oklab, var(--col-fifth) 25%, transparent) !important; }

td.note-root  { background: color-mix(in oklab, var(--col-root) 45%, transparent) !important; }
td.note-third { background: color-mix(in oklab, var(--col-third) 45%, transparent) !important; }
td.note-fifth { background: color-mix(in oklab, var(--col-fifth) 45%, transparent) !important; }

td.near-root  { background: color-mix(in oklab, var(--col-root) 15%, transparent) !important; }
td.near-third { background: color-mix(in oklab, var(--col-third) 15%, transparent) !important; }
td.near-fifth { background: color-mix(in oklab, var(--col-fifth) 15%, transparent) !important; }

td.side-empty { background: var(--bg) !important; }

/* “stroke” blanco para celdas que forman tritono en esa fila */
td.is-tritone{
  box-shadow: inset 0 0 0 1px #ffffff;
  border-radius: 2px; /* opcional */
}