:root{
  /* ===== Base ===== */
  --bg:#0e0f13; --fg:#e8e9ef; --muted:#a8acb8; --card:#161922; --grid:#2a2f3a;

  /* Colores escala (chips de notas) */
  --esc1:#ff6b6b;      /* rojo */
  --esc2:#ffd166;      /* amarillo */
  --esc3:#7aa2ff;      /* azul */

  /* ===== Venn: paleta editable ===== */
  /* Bordes de círculos cuando "Colorear comunes" está activo */
  --c1-brd: var(--esc1);
  --c2-brd: var(--esc2);
  --c3-brd: var(--esc3);

  /* Rellenos sutiles de círculos (toggle "Relleno círculos") */
  /* Sube/baja opacidad al gusto (0.10–0.25 recomendado) */
  --c1-fill: hsl(210 90% 56% / 0.20);
  --c2-fill: hsl(45 95% 60% / 0.20);
  --c3-fill: hsl(200 92% 60% / 0.20);

  /* Colores de chips en zonas de intersección cuando "Colorear comunes" está activo */
  --i12-bg: hsla(210, 90%, 56%, 0.18);
  --i12-brd: hsla(210, 90%, 56%, 0.55);
  --i13-bg: hsla(160, 65%, 48%, 0.18);
  --i13-brd: hsla(160, 65%, 48%, 0.55);
  --i23-bg: hsla(40, 95%, 60%, 0.20);
  --i23-brd: hsla(40, 95%, 60%, 0.55);
  --i123-bg: hsla(300, 70%, 60%, 0.22);
  --i123-brd: hsla(300, 70%, 60%, 0.60);

  /* Geometría general del Venn */
  --ring: 2px;
  --chip-pad: 3px 8px;
  --venn-size: clamp(460px, 72vw, 920px);
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font:16px/1.4 ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial
}
.wrap{max-width:1200px;margin:24px auto;padding:0 16px}
h1{font-size:20px;margin:0 0 14px}

/* ===== Inputs / controles ===== */
.controls{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.col{background:var(--card);border:1px solid #232834;border-radius:14px;padding:12px}
.row{display:flex;gap:10px;align-items:center;margin:8px 0}
.row input{flex:1;background:#0b0c10;border:1px solid #2b3140;color:var(--fg);padding:10px 12px;border-radius:10px}

.size-row{display:flex;gap:12px;align-items:center;margin:16px 0}
.size-row input{width:90px}

.panel{background:var(--card);border:1px solid #232834;border-radius:14px;padding:14px;margin:16px 0}

/* ===== Chips de notas ===== */
.chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.chip{background:#121521;border:1px solid #232834;color:#e8e9ef;padding:6px 10px;border-radius:12px;font-size:14px}
.chip.red{border-color:#3a2020;color:var(--esc1)}
.chip.yellow{border-color:#3a3620;color:var(--esc2)}
.chip.blue{border-color:#202a3a;color:var(--esc3)}

/* ===== Tabla genérica ===== */
.grid{width:100%;border-collapse:collapse}
.grid th,.grid td{border:1px solid var(--grid);padding:8px 10px;text-align:center}
.grid thead th{background:#121521;position:sticky;top:0;z-index:1}
.grid .on{background:#1e2a43}
.chordname{text-align:left;white-space:nowrap}
.idx{width:44px}

/* Colores por fila según escala */
.row--esc1 .chordname{color:var(--esc1)}
.row--esc1{border-left:4px solid var(--esc1)}
.row--esc2 .chordname{color:var(--esc2)}
.row--esc2{border-left:4px solid var(--esc2)}
.row--esc3 .chordname{color:var(--esc3)}
.row--esc3{border-left:4px solid var(--esc3)}

/* ====================================================================== */
/* ========================   REPORTE 2 (VENN)   ========================= */
/* ====================================================================== */

/* Toolbar de toggles */
.toolbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:flex-end;
  margin-bottom:8px;opacity:.95
}
.toolbar label{font-size:13px;color:#d8deea;cursor:pointer;user-select:none}

/* Lienzo del Venn */
.venn{
  position:relative;width:var(--venn-size);height:var(--venn-size);margin:0 auto
}
.circle{
  position:absolute;width:62%;height:62%;
  border:var(--ring) solid #ffffffa8;border-radius:50%;
  background:transparent;
}
.c1{left:6%;top:12%}
.c2{right:6%;top:12%}
.c3{left:19%;top:48%}


/* === Bordes de círculos: ahora controlados por .outline === */
.outline .c1{ border-color: var(--c1-brd); }
.outline .c2{ border-color: var(--c2-brd); }
.outline .c3{ border-color: var(--c3-brd); }

/* === Chips de intersección: siguen con .colorize === */
.colorize .z-i12 .cell{ background: var(--i12-bg); border-color: var(--i12-brd); }
.colorize .z-i13 .cell{ background: var(--i13-bg); border-color: var(--i13-brd); }
.colorize .z-i23 .cell{ background: var(--i23-bg); border-color: var(--i23-brd); }
.colorize .z-i123 .cell{ background: var(--i123-bg); border-color: var(--i123-brd); }

/* (opcional) si quieres que, con .outline apagado, vuelvan a verse blancos: 
   ya lo tienes por defecto en .circle { border: 2px solid #ffffffa8; } */


/* Relleno de círculos (independiente) */
.fillcircles .c1{background-color:var(--c1-fill);mix-blend-mode:lighten}
.fillcircles .c2{background-color:var(--c2-fill);mix-blend-mode:lighten}
.fillcircles .c3{background-color:var(--c3-fill);mix-blend-mode:lighten}

/* Zonas de texto/chips */
.zone{
  position:absolute;z-index:3;overflow:hidden;
  display:flex;flex-direction:column;gap:4px;pointer-events:none
}
.cap{font-size:11px;color:#cfd6e6;opacity:.95;pointer-events:auto}
/* ⚠️ Importante: solo las rejillas DENTRO de zonas del Venn usan display:grid */
.zone .grid{display:grid;gap:6px;align-content:start;pointer-events:auto}
.cell{
  border:1px solid rgba(255,255,255,.22);
  border-radius:8px;
  padding:var(--chip-pad);
  background:#0b0f14cc;
  white-space:nowrap;
  line-height:1.15;
  font-size:12px;
}

/* Posicionamiento afinado de zonas */
.z-only1{left:15%;top:35%;width:28%;height:40%;text-align:left}
.z-only1 .grid{grid-template-columns:repeat(3,auto);justify-content:start}

.z-only2{right:15%;top:35%;width:28%;height:40%;text-align:right;align-items:flex-end}
.z-only2 .grid{grid-template-columns:repeat(3,auto);justify-content:end}

.z-only3{left:31%;top:63%;width:36%;height:24%;text-align:center;align-items:center;justify-content:flex-end}
.z-only3 .grid{grid-template-columns:repeat(3,auto);justify-content:center}







.z-i12{left:38%;top:30%;width:24%;height:22%;text-align:center}
.z-i12 .grid{grid-template-columns:repeat(2,auto);justify-content:center}

.z-i13{left:27%;top:60%;width:22%;height:16%;text-align:left}
.z-i13 .grid{grid-template-columns:repeat(2,auto);justify-content:start}

.z-i23{right:27%;top:60%;width:22%;height:16%;text-align:right}
.z-i23 .grid{grid-template-columns:repeat(2,auto);justify-content:end}

.z-i123{left:43%;top:60%;width:16%;height:12%;text-align:center}
.z-i123 .grid{grid-template-columns:repeat(2,auto);justify-content:center}

/* Responsive fino para chips/cabeceras dentro de zonas */
@media (max-width:560px){
  .cell{font-size:11px}
  .cap{font-size:10px}
}

/* ====================================================================== */
/* ========================   REPORTE 1 (TABLAS)  ======================= */
/* ====================================================================== */

/* Forzar que la tabla grande y sus celdas aprovechen el 100% */
#table-host table,
#table-host .grid{
  width:100%;
  max-width:none;
  table-layout:fixed;
  border-collapse:collapse;
}
#table-host th,#table-host td{
  white-space:nowrap;
  box-sizing:border-box;
}

/* Parámetros comunes para #table-host y #grid12-host */
#table-host, #grid12-host{
  --col-idx-width:56px;
  --col-chord-width:160px;
  --note-cols:12;
}

/* 1ª y 2ª columna fijas (ancho desde vars) */
#table-host thead th:nth-child(1),
#table-host tbody td:nth-child(1),
#grid12-host thead th:nth-child(1),
#grid12-host tbody td:nth-child(1){
  width:var(--col-idx-width);
}
#table-host thead th:nth-child(2),
#table-host tbody td:nth-child(2),
#grid12-host thead th:nth-child(2),
#grid12-host tbody td:nth-child(2){
  width:var(--col-chord-width);
}

/* Del 3er th/td en adelante (notas): reparto uniforme del resto */
#table-host thead th:nth-child(n+3),
#table-host tbody td:nth-child(n+3),
#grid12-host thead th:nth-child(n+3),
#grid12-host tbody td:nth-child(n+3){
  width:calc(
    (100% - var(--col-idx-width) - var(--col-chord-width))
    / var(--note-cols)
  );
}

/* Variante opcional: usar CSS Grid para garantizar ancho completo siempre */
#table-host.force-grid table,
#grid12-host.force-grid table{
  display:grid;
  width:100%;
  max-width:none;
  grid-template-columns:
    var(--col-idx-width)
    var(--col-chord-width)
    repeat(var(--note-cols), 1fr);
  border-collapse:collapse;
}
#table-host.force-grid thead,
#table-host.force-grid tbody,
#table-host.force-grid tr,
#grid12-host.force-grid thead,
#grid12-host.force-grid tbody,
#grid12-host.force-grid tr{ display:contents; }
#table-host.force-grid th,
#table-host.force-grid td,
#grid12-host.force-grid th,
#grid12-host.force-grid td{
  box-sizing:border-box;
  width:auto !important;
  white-space:nowrap;
}

/* ====================================================================== */
/* ========== OVERRIDES que venían del <style> de index.html ============ */
/*  (Se colocan al final para respetar la cascada original)               */
/* ====================================================================== */

:root{
  --bg:#0b0f14; --fg:#e9eef6; --muted:#cfd6e6;
  --tab-brd:#1c2736;
  --ring:2px; --chip-pad:3px 8px;
  --venn-size: clamp(460px, 72vw, 920px); /* inline usaba --size */

  /* Paleta editable para Reporte 2 (como en el index.html) */
  --c1-brd: var(--esc1);
  --c2-brd: var(--esc2);
  --c3-brd: var(--esc3);

  --fill-alpha: 0.12; /* ajusta 0.10–0.25 a tu gusto */

  --c1-fill: rgb(from var(--esc1) r g b / var(--fill-alpha));
  --c2-fill: rgb(from var(--esc2) r g b / var(--fill-alpha));
  --c3-fill: rgb(from var(--esc3) r g b / var(--fill-alpha));

  --i12-bg: hsla(210, 90%, 56%, 0.18);
  --i12-brd: hsla(210, 90%, 56%, 0.55);
  --i13-bg: hsla(160, 65%, 48%, 0.18);
  --i13-brd: hsla(160, 65%, 48%, 0.55);
  --i23-bg: hsla(40, 95%, 60%, 0.20);
  --i23-brd: hsla(40, 95%, 60%, 0.55);
  --i123-bg: hsla(300, 70%, 60%, 0.22);
  --i123-brd: hsla(300, 70%, 60%, 0.60);
}

/* Estética específica del Reporte 1 del inline */
.r1 main{max-width:1200px;margin:24px auto;padding:0 16px}
.r1 h2{font-size:18px;margin:0 0 12px}
.r1 .panel{background:#161922;border:1px solid #232834;border-radius:14px;padding:14px;margin:14px 0}
.r1 .grid12 table{
  width:100%;border-collapse:collapse;background:#0f141c;border:1px solid var(--tab-brd);
  border-radius:10px;overflow:hidden
}
.r1 th,.r1 td{border-bottom:1px dashed #233046;padding:10px;vertical-align:top;text-align:left}
.r1 th{background:#101826;color:#cfe2ff}
.r1 tr:last-child td{border-bottom:none}
.r1 .rowlbl{white-space:nowrap;color:#a8acb8}
.r1 .tag{display:inline-block;padding:2px 8px;border:1px solid #ffffff28;border-radius:999px;margin:2px;background:#111827}
.r1 .small{font-size:12px;opacity:.85}

/* Estética específica del Reporte 2 del inline */
.r2 main{max-width:1200px;margin:20px auto;padding:0 16px}
.r2 h2{font-size:18px;margin:6px 0 12px}

/* Nota: toolbar/venn/zonas ya están definidas arriba; mantienen comportamiento */
/* Chips del Venn (las .cell dentro de .zone) */
.zone .cell{
  display: inline-flex;       /* o flex; inline-flex conserva el “flujo” de grid */
  align-items: center;        /* centra verticalmente el texto */
  justify-content: center;    /* centra horizontalmente */
  text-align: center;         /* centra el texto si hay saltos de línea */
  /* puedes mantener lo que ya tenías */
  padding: var(--chip-pad);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 8px;
  background: #0b0f14cc;
  white-space: nowrap;        /* si quieres permitir varias líneas, quita esta línea */
  line-height: 1.15;
  font-size: 12px;
}






:root{
  --venn-zoom: 1;
  --venn-pan-x: 0px;
  --venn-pan-y: 0px;
}

/* El viewport permite scroll y “contiene” el escalado para que no rompa el layout */
.venn-viewport{
  position: relative;
  overflow: auto;
  padding: 8px;
  border-radius: 12px;
  /* opcional: borde sutil del viewport
  border: 1px solid #232834;
  background: transparent;
  */
}

/* La capa que se transforma (pan + scale) */
.venn-zoomwrap{
  display: inline-block;
  transform: translate(var(--venn-pan-x), var(--venn-pan-y)) scale(var(--venn-zoom));
  transform-origin: center center;
  will-change: transform;
}

/* Botones de zoom (opcional estilizado) */
.zoom-btn{
  width: 28px; height: 28px; line-height: 26px;
  border-radius: 8px; border:1px solid #232834; background:#0f141c;
  color:#e8e9ef; cursor:pointer; margin:0 6px; font-size:16px;
}
.zoom-btn:active{ transform: translateY(1px); }