/* keisan24 · laboratorio — piezas comunes a cualquier piel (etiqueta LAB, diferencia, distribución).
   El color del tema llega en --lab-c (lo define cada piel por data-tema); si no, el azul del sitio. */
:root{--lab-c:var(--ai);--lab-on:#fff}

/* selector de piel, fijo abajo a la izquierda: «LAB» (va a la página publicada) + B / C′ */
.lab-piel{position:fixed;left:10px;bottom:10px;z-index:80;display:flex;align-items:stretch;gap:0;
  background:#fff;border:1.5px solid #14171c;border-radius:4px;box-shadow:0 2px 10px rgba(0,0,0,.22);overflow:hidden;
  font:700 .76rem/1 var(--sans)}
.lab-piel a,.lab-piel button{display:flex;align-items:center;min-height:36px;padding:0 .7rem;border:0;margin:0;
  font:inherit;color:#14171c;background:#fff;text-decoration:none;cursor:pointer;white-space:nowrap}
.lab-piel a{background:#14171c;color:#fff;letter-spacing:.12em}
.lab-piel button+button{border-left:1px solid #c9ced5}
.lab-piel button[aria-pressed="true"]{background:#253f6e;color:#fff}
.lab-piel button:hover{background:#eef0f3}
.lab-piel button[aria-pressed="true"]:hover{background:#1f355d}
.lab-piel :focus-visible{outline:3px solid #1d55c8;outline-offset:-3px}
@media (max-width:600px){.lab-piel{left:6px;bottom:6px;font-size:.7rem}.lab-piel a,.lab-piel button{min-height:30px;padding:0 .5rem}body{padding-bottom:44px}}
@media print{.lab-piel{display:none}}

/* la cifra: un pulso corto al terminar de avanzar */
.answer .v>span[id]{font-variant-numeric:tabular-nums}
@keyframes lab-fin{0%{text-shadow:0 0 0 transparent}35%{text-shadow:0 0 .01px currentColor}100%{text-shadow:0 0 0 transparent}}
.answer .v>span.lab-fin{animation:lab-fin .45s ease-out}

/* «前回より ＋◯円» */
.lab-dif{display:block;width:max-content;max-width:100%;margin:.15rem 0 .1rem;padding:.12rem .5rem;
  border:1px solid var(--line);border-radius:2px;background:var(--sheet);
  font:700 .8rem/1.5 var(--sans);font-variant-numeric:tabular-nums;color:var(--ink2)}
.lab-dif[hidden],.lab-dist[hidden]{display:none}
@keyframes lab-golpe{0%{transform:translateY(-3px);opacity:.3}100%{transform:none;opacity:1}}
.lab-dif.lab-golpe{animation:lab-golpe .28s ease-out}

/* distribución de 国税庁 (histograma de 14 tramos) */
.lab-dist{margin:1rem 0 0;padding:.75rem 0 0;border-top:1px dashed var(--line)}
.lab-dist-h{display:flex;align-items:flex-end;gap:2px;height:46px}
.lab-dist-h i{flex:1 1 0;min-width:0;background:var(--line);border-radius:1px 1px 0 0;transition:background .25s}
.lab-dist-h i.on{background:var(--lab-c)}
.lab-dist-ej{position:relative;height:1.3em;margin-top:.2rem;font-size:.68rem;color:var(--dim);font-variant-numeric:tabular-nums}
.lab-dist-ej span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.lab-dist-ej span:first-child{transform:none}
.lab-dist-ej span:last-child{transform:translateX(-100%)}
/* en celular la distribución va debajo del formulario (el resultado queda corto arriba) */
.page>main>.lab-dist{margin:0 var(--pad) var(--pad);padding:.9rem 1rem;border:1px solid var(--line2);background:var(--sheet)}
.lab-dist-t{margin:.45rem 0 0;font-size:.8rem;line-height:1.6;color:var(--muted)}
.lab-dist-t b{color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  .answer .v>span.lab-fin,.lab-dif.lab-golpe{animation:none}
  .lab-dist-h i{transition:none}
}

/* keisan24 · laboratorio — piel «路線色»: cada tema es una línea de tren con su color.
   El resultado es un campo plano del color de la línea con la cifra en blanco; la marca de la línea
   (círculo con el kanji del tema) va en la esquina; los títulos son estaciones sobre la línea.
   Todo cuelga de html[data-lab="rosen"]; data-tema lo pone lab/construir.mjs. */

html[data-lab="rosen"]{
  --paper:#f2f3f5; --sheet:#fff; --sunk:#f6f7f9;
  --line:#d8dce2; --line2:#e8ebef; --ctl:#9aa2ad;
  --ink:#16191e; --ink2:#2f3540; --muted:#4f5763; --dim:#5f6670;
  --nav-bg:#fff; --nav-ink:#2f3540; --nav-on:#16191e; --nav-hover:#f0f2f5; --nav-line:#d8dce2;
  --lab-c:#c4161c; --lab-d:#a01217; --lab-t:#fdecec; --lab-on:#fff; --lab-k:"計";
}
html[data-lab="rosen"][data-tema="kyuyo"]{--lab-c:#008247; --lab-d:#006638; --lab-t:#e5f4ec; --lab-on:#fff; --lab-k:"給"}
html[data-lab="rosen"][data-tema="zei"]{--lab-c:#d1101e; --lab-d:#a50c17; --lab-t:#fdeaeb; --lab-on:#fff; --lab-k:"税"}
html[data-lab="rosen"][data-tema="hoken"]{--lab-c:#006bb6; --lab-d:#00508a; --lab-t:#e5f0f9; --lab-on:#fff; --lab-k:"保"}
html[data-lab="rosen"][data-tema="kabe"]{--lab-c:#f29100; --lab-d:#7d4a00; --lab-t:#fff2dc; --lab-on:#17110a; --lab-k:"壁"}

html.dark[data-lab="rosen"]{
  --paper:#0f1215; --sheet:#171b20; --sunk:#1e2329;
  --line:#343b44; --line2:#272d35; --ctl:#59616b;
  --ink:#eef0f2; --ink2:#d3d8de; --muted:#a9b0b9; --dim:#959ca6;
  --nav-bg:#171b20; --nav-ink:#d3d8de; --nav-on:#fff; --nav-hover:#1e2329; --nav-line:#343b44;
  --lab-c:#ff6b6f; --lab-d:#ffa9ab; --lab-t:#2c1a1b; --lab-on:#1a0606;
}
html.dark[data-lab="rosen"][data-tema="kyuyo"]{--lab-c:#3fcf86; --lab-d:#93e6bb; --lab-t:#12261b; --lab-on:#04170c}
html.dark[data-lab="rosen"][data-tema="zei"]{--lab-c:#ff6b6f; --lab-d:#ffa9ab; --lab-t:#2c1a1b; --lab-on:#1a0606}
html.dark[data-lab="rosen"][data-tema="hoken"]{--lab-c:#5cb3ff; --lab-d:#a8d4ff; --lab-t:#14223a; --lab-on:#061426}
html.dark[data-lab="rosen"][data-tema="kabe"]{--lab-c:#ffb340; --lab-d:#ffd28f; --lab-t:#2c2310; --lab-on:#17110a}

/* ── cabecera: navegación blanca con cada sección como estación de su línea ── */
[data-lab="rosen"] .gnav{background:var(--nav-bg);border-bottom:1px solid var(--line)}
[data-lab="rosen"] .gnav::after{content:"";display:block;height:6px;background:var(--lab-c)}
[data-lab="rosen"] .gnav-in>ul a{display:flex;align-items:center;gap:.45em}
[data-lab="rosen"] .gnav-in>ul a[data-tema]::before{content:"";flex:0 0 auto;width:.62em;height:.62em;border-radius:50%;
  border:3px solid var(--t,var(--ctl));background:var(--sheet)}
[data-lab="rosen"] .gnav-in>ul a[aria-current]::after{background:var(--lab-c);height:4px}
[data-lab="rosen"] .gnav-todo{color:var(--ink);border-left-color:var(--line)}

/* ── la hoja: esquinas redondeadas, como un cartel de andén ── */
[data-lab="rosen"] .page>main{border-radius:10px;overflow:visible}
[data-lab="rosen"] .box,[data-lab="rosen"] .col .box{border-radius:10px}
[data-lab="rosen"] h1 .tag{color:var(--lab-d)}

/* ── títulos: una estación (círculo) sobre el trazo de la línea ── */
[data-lab="rosen"] h2{padding-left:1.45em;border-bottom:3px solid var(--lab-c)}
[data-lab="rosen"] h2::after{left:0;top:.2em;bottom:auto;width:.62em;height:.62em;border-radius:50%;
  border:4px solid var(--lab-c);background:var(--sheet)}
[data-lab="rosen"] .col h2{border-bottom-width:2px}

/* ── el resultado: campo plano del color de la línea, cifra en blanco y la marca de la línea ── */
[data-lab="rosen"] .answer,[data-lab="rosen"] .answer.alt{background:var(--lab-c);border:0;border-radius:12px;
  color:var(--lab-on);position:relative}
[data-lab="rosen"] .answer .k{color:var(--lab-on);opacity:.92;max-width:calc(100% - 3.4rem)}
[data-lab="rosen"] .answer .v,[data-lab="rosen"] .answer.alt .v{color:var(--lab-on);border-bottom:0;padding-bottom:0}
[data-lab="rosen"] .answer .v small{color:var(--lab-on);opacity:.85}
[data-lab="rosen"] .answer .s{color:var(--lab-on);border-top:1px solid color-mix(in srgb,var(--lab-on) 28%,transparent);padding-top:.5rem;margin-top:.6rem}
[data-lab="rosen"] .answer .s b{color:var(--lab-on)}
[data-lab="rosen"] .answer a{color:var(--lab-on)}
[data-lab="rosen"] .answer::after{content:var(--lab-k);position:absolute;top:clamp(14px,3vw,22px);right:clamp(14px,3vw,22px);
  width:2.6rem;height:2.6rem;display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--lab-d);
  border:5px solid color-mix(in srgb,var(--lab-on) 70%,transparent);font:700 1.05rem/1 var(--sans)}
html.dark[data-lab="rosen"] .answer::after{background:var(--sheet)}
[data-lab="rosen"] .answer.lab-sello::after{animation:lab-llega .32s cubic-bezier(.2,1.5,.4,1)}
@keyframes lab-llega{0%{transform:translateX(-14px);opacity:0}100%{transform:none;opacity:1}}
[data-lab="rosen"] .lab-dif{background:color-mix(in srgb,var(--lab-on) 16%,transparent);border-color:transparent;color:var(--lab-on)}
[data-lab="rosen"] .answer .lab-dist{border-top-color:color-mix(in srgb,var(--lab-on) 30%,transparent)}
[data-lab="rosen"] .answer .lab-dist-h i{background:color-mix(in srgb,var(--lab-on) 30%,transparent)}
[data-lab="rosen"] .answer .lab-dist-h i.on{background:var(--lab-on)}
[data-lab="rosen"] .answer .lab-dist-ej,[data-lab="rosen"] .answer .lab-dist-t,[data-lab="rosen"] .answer .lab-dist-t b{color:var(--lab-on)}

/* ── la entrada: campos redondeados, rótulos en el color de la línea ── */
[data-lab="rosen"] .form{border-radius:10px;background:var(--line2);border-color:var(--line)}
[data-lab="rosen"] .form dt{background:var(--sheet);color:var(--lab-d)}
[data-lab="rosen"] input[type=number],[data-lab="rosen"] select{border-radius:8px}
[data-lab="rosen"] input[type=number]:focus,[data-lab="rosen"] select:focus{outline:3px solid var(--lab-c);outline-offset:1px;border-color:var(--lab-c)}
[data-lab="rosen"] input[type=range]{accent-color:var(--lab-c)}

/* ── tablas: cabecera en el color de la línea, como un horario de andén ── */
[data-lab="rosen"] thead th{background:var(--lab-c);color:var(--lab-on);border-bottom:0}
[data-lab="rosen"] thead th .r{color:var(--lab-on);opacity:.85}
[data-lab="rosen"] tr.actual>td,[data-lab="rosen"] tr.actual>th{background:var(--lab-t)}
[data-lab="rosen"] tr.actual>td:first-child,[data-lab="rosen"] tr.actual>th:first-child{box-shadow:inset 5px 0 0 var(--lab-c)}
[data-lab="rosen"] tr.tot td,[data-lab="rosen"] tr.tot th{border-top:2px solid var(--lab-c)}

/* ── enlaces a otras calculadoras: cada uno con el círculo de SU línea ── */
[data-lab="rosen"] a[data-tema="kyuyo"]{--t:#008247} [data-lab="rosen"] a[data-tema="zei"]{--t:#d1101e}
[data-lab="rosen"] a[data-tema="hoken"]{--t:#006bb6} [data-lab="rosen"] a[data-tema="kabe"]{--t:#f29100}
html.dark[data-lab="rosen"] a[data-tema="kyuyo"]{--t:#3fcf86} html.dark[data-lab="rosen"] a[data-tema="zei"]{--t:#ff6b6f}
html.dark[data-lab="rosen"] a[data-tema="hoken"]{--t:#5cb3ff} html.dark[data-lab="rosen"] a[data-tema="kabe"]{--t:#ffb340}
[data-lab="rosen"] .chips a{border-radius:999px}
[data-lab="rosen"] .chips a[data-tema]:not([data-tema="neutral"])::before,
[data-lab="rosen"] .slist a[data-tema]:not([data-tema="neutral"])::before,
[data-lab="rosen"] .mt-g a[data-tema]:not([data-tema="neutral"])::before{content:"";display:inline-block;width:.55em;height:.55em;
  margin-right:.45em;border-radius:50%;border:2.5px solid var(--t);background:var(--sheet);vertical-align:.02em}
[data-lab="rosen"] .grid a{border-radius:10px}
[data-lab="rosen"] .grid a[data-tema]:not([data-tema="neutral"]){box-shadow:inset 6px 0 0 var(--t)}

/* ── avisos ── */
[data-lab="rosen"] .callout{border-radius:10px;border-left:6px solid var(--lab-c);background:var(--lab-t)}
[data-lab="rosen"] .callout.warn{border-left-color:#d1101e}

@media (prefers-reduced-motion:reduce){[data-lab="rosen"] .answer.lab-sello::after{animation:none}}
@media print{[data-lab="rosen"] .answer{background:none;color:inherit}[data-lab="rosen"] .answer::after{display:none}}

/* keisan24 · laboratorio — piel «帳票»: formulario con la rejilla impresa en color. 02-10-2026.
   Un color de tinta por tema (給与 緑・税金 朱・社会保険 藍・年収の壁 山吹), hoja blanca sobre gris frío,
   la cifra en tinta con doble raya de total y el sello 「済」 cuando termina el cálculo.
   Todo cuelga de html[data-lab="chohyo"]; data-tema lo pone lab/construir.mjs. */

html[data-lab="chohyo"]{
  --paper:#e9ecef; --sheet:#fff; --sunk:#f4f6f8;
  --line:#cfd5dc; --line2:#e3e7ec; --ctl:#9aa3ad;
  --ink:#14171c; --ink2:#2f3540; --muted:#4f5763; --dim:#5f6670;
  --nav-bg:#1b1f26; --nav-ink:#d9dde3; --nav-on:#fff; --nav-hover:#2a2f38;
  --sello:#c8281e;
  /* tinta por defecto (portada, páginas del sitio): 朱 del logo */
  --lab-c:#c8361d; --lab-d:#9f2812; --lab-t:#fcece7; --lab-l:#f1c2b6; --lab-on:#fff;
}
html[data-lab="chohyo"][data-tema="kyuyo"]{--lab-c:#0a7d45; --lab-d:#06592f; --lab-t:#e6f4ec; --lab-l:#a9d8bd; --lab-on:#fff}
html[data-lab="chohyo"][data-tema="zei"]{--lab-c:#c8361d; --lab-d:#9f2812; --lab-t:#fcece7; --lab-l:#f1c2b6; --lab-on:#fff}
html[data-lab="chohyo"][data-tema="hoken"]{--lab-c:#1d55c8; --lab-d:#153f97; --lab-t:#e8eefb; --lab-l:#b4c7ef; --lab-on:#fff}
html[data-lab="chohyo"][data-tema="kabe"]{--lab-c:#e39300; --lab-d:#7a4d00; --lab-t:#fdf3db; --lab-l:#f3cf87; --lab-on:#1a1206}

html.dark[data-lab="chohyo"]{
  --paper:#0f1215; --sheet:#171b20; --sunk:#1e2329;
  --line:#343b44; --line2:#272d35; --ctl:#59616b;
  --ink:#eef0f2; --ink2:#d3d8de; --muted:#a9b0b9; --dim:#959ca6;
  --nav-bg:#0a0c0f; --nav-hover:#1d2127; --sello:#ff6b5e;
  --lab-c:#ff8466; --lab-d:#ffb4a1; --lab-t:#2d1c18; --lab-l:#5a3329; --lab-on:#1a0d09;
}
html.dark[data-lab="chohyo"][data-tema="kyuyo"]{--lab-c:#52c98b; --lab-d:#9be3bc; --lab-t:#14261c; --lab-l:#2c5a41; --lab-on:#06170e}
html.dark[data-lab="chohyo"][data-tema="zei"]{--lab-c:#ff8466; --lab-d:#ffb4a1; --lab-t:#2d1c18; --lab-l:#5a3329; --lab-on:#1a0d09}
html.dark[data-lab="chohyo"][data-tema="hoken"]{--lab-c:#86a8ff; --lab-d:#bccfff; --lab-t:#18213a; --lab-l:#33467a; --lab-on:#0b1226}
html.dark[data-lab="chohyo"][data-tema="kabe"]{--lab-c:#ffbf47; --lab-d:#ffd98f; --lab-t:#2c2310; --lab-l:#5e4a1d; --lab-on:#1a1206}

/* ── cabecera: barra de navegación en 墨 y la franja índice de los cuatro temas ── */
[data-lab="chohyo"] .gnav{background:var(--nav-bg)}
[data-lab="chohyo"] .gnav::after{content:"";display:block;height:4px;
  background:linear-gradient(90deg,#0a7d45 0 25%,#c8361d 25% 50%,#1d55c8 50% 75%,#e39300 75% 100%)}
html.dark[data-lab="chohyo"] .gnav::after{
  background:linear-gradient(90deg,#52c98b 0 25%,#ff8466 25% 50%,#86a8ff 50% 75%,#ffbf47 75% 100%)}
[data-lab="chohyo"] .gnav-in>ul a[aria-current]::after{background:var(--lab-c);height:3px}
[data-lab="chohyo"] .gnav-in>ul a[data-tema="kyuyo"]:hover{box-shadow:inset 0 -3px 0 #0a7d45}
[data-lab="chohyo"] .gnav-in>ul a[data-tema="zei"]:hover{box-shadow:inset 0 -3px 0 #c8361d}
[data-lab="chohyo"] .gnav-in>ul a[data-tema="hoken"]:hover{box-shadow:inset 0 -3px 0 #1d55c8}
[data-lab="chohyo"] .gnav-in>ul a[data-tema="kabe"]:hover{box-shadow:inset 0 -3px 0 #e39300}

/* ── la hoja: banda de color arriba y la pestaña del tema ── */
[data-lab="chohyo"] .page>main{border-radius:0;border-top:5px solid var(--lab-c);position:relative}
[data-lab="chohyo"][data-tema] .page>main::before{position:absolute;top:-5px;right:var(--pad);
  padding:.1rem .7rem .2rem;background:var(--lab-c);color:var(--lab-on);
  font:700 .72rem/1.5 var(--sans);letter-spacing:.14em;border-radius:0 0 2px 2px}
[data-lab="chohyo"][data-tema="kyuyo"] .page>main::before{content:"給与"}
[data-lab="chohyo"][data-tema="zei"] .page>main::before{content:"税金"}
[data-lab="chohyo"][data-tema="hoken"] .page>main::before{content:"社会保険"}
[data-lab="chohyo"][data-tema="kabe"] .page>main::before{content:"年収の壁"}
[data-lab="chohyo"] h1 .tag{color:var(--lab-d)}

/* ── títulos de sección: casilla de color + raya en tinta del tema ── */
[data-lab="chohyo"] h2{border-bottom:1px solid var(--lab-l);padding-left:.85rem}
[data-lab="chohyo"] h2::after{left:0;top:.28em;bottom:auto;width:5px;height:1.05em;background:var(--lab-c)}
[data-lab="chohyo"] .col h2{padding-left:.75rem}
[data-lab="chohyo"] .col h2::after{width:4px}

/* ── el resultado: casilla de formulario con su rótulo, doble raya de total y sello ── */
[data-lab="chohyo"] .answer,[data-lab="chohyo"] .answer.alt{--pd:clamp(18px,3.8vw,28px);background:var(--sheet);
  border:2px solid var(--lab-c);border-radius:0;position:relative;padding:var(--pd)}
/* el rótulo va pegado a la esquina como en un formulario, pero en el flujo: si ocupa dos líneas empuja la cifra */
[data-lab="chohyo"] .answer .k{display:table;max-width:calc(100% - 3.4rem);margin:calc(-1 * var(--pd)) 0 .45rem calc(-1 * var(--pd));
  background:var(--lab-c);color:var(--lab-on);padding:.16rem .65rem .2rem;font-size:.74rem;letter-spacing:.06em;line-height:1.5}
[data-lab="chohyo"] .answer .v,[data-lab="chohyo"] .answer.alt .v{color:var(--ink);border-bottom:5px double var(--lab-c)}
[data-lab="chohyo"] .answer .v small{color:var(--muted)}
[data-lab="chohyo"] .answer .s{border-top:1px solid var(--lab-l);padding-top:.5rem;margin-top:.6rem}
[data-lab="chohyo"] .answer .s+.s{border-top:1px dashed var(--line2);margin-top:.35rem;padding-top:.35rem}
[data-lab="chohyo"] .answer .s b{color:var(--ink)}
/* sello 「済」: aparece cuando la cifra termina (lab.js pone .lab-sello) */
[data-lab="chohyo"] .answer::after{content:"済";position:absolute;top:.55rem;right:.7rem;width:2.5rem;height:2.5rem;
  display:grid;place-items:center;border:2px solid var(--sello);border-radius:50%;color:var(--sello);
  font:700 1.15rem/1 var(--sans);transform:rotate(-14deg);opacity:0;pointer-events:none}
[data-lab="chohyo"] .answer.lab-sello::after{opacity:.88;animation:lab-sello .34s cubic-bezier(.2,1.6,.4,1)}
@keyframes lab-sello{0%{transform:rotate(-14deg) scale(1.7);opacity:0}100%{transform:rotate(-14deg) scale(1);opacity:.88}}
[data-lab="chohyo"] .lab-dif{border-color:var(--lab-l);background:var(--lab-t);color:var(--ink)}

/* ── la entrada: el 升目 con la rejilla en la tinta del tema ── */
[data-lab="chohyo"] .form{background:var(--lab-l);border-color:var(--lab-c);border-radius:0}
[data-lab="chohyo"] .form dt{background:var(--lab-t);color:var(--lab-d)}
html.dark[data-lab="chohyo"] .form dt{color:var(--lab-d)}
[data-lab="chohyo"] input[type=number],[data-lab="chohyo"] select{border-radius:0}
[data-lab="chohyo"] input[type=number]:focus,[data-lab="chohyo"] select:focus{outline:2px solid var(--lab-c);outline-offset:1px;border-color:var(--lab-c)}
[data-lab="chohyo"] input[type=range]{accent-color:var(--lab-c)}

/* ── tablas: cabecera teñida, raya de tinta, total con doble raya ── */
[data-lab="chohyo"] thead th{background:var(--lab-t);color:var(--lab-d);border-bottom:2px solid var(--lab-c)}
[data-lab="chohyo"] tr.actual>td,[data-lab="chohyo"] tr.actual>th{background:var(--lab-t)}
[data-lab="chohyo"] tr.actual>td:first-child,[data-lab="chohyo"] tr.actual>th:first-child{box-shadow:inset 4px 0 0 var(--lab-c)}
[data-lab="chohyo"] tr.tot td,[data-lab="chohyo"] tr.tot th{border-top:3px double var(--lab-c)}

/* ── chips, lista lateral y tarjetas: cada enlace lleva el color de SU tema ── */
[data-lab="chohyo"] a[data-tema="kyuyo"]{--t:#0a7d45} [data-lab="chohyo"] a[data-tema="zei"]{--t:#c8361d}
[data-lab="chohyo"] a[data-tema="hoken"]{--t:#1d55c8} [data-lab="chohyo"] a[data-tema="kabe"]{--t:#e39300}
html.dark[data-lab="chohyo"] a[data-tema="kyuyo"]{--t:#52c98b} html.dark[data-lab="chohyo"] a[data-tema="zei"]{--t:#ff8466}
html.dark[data-lab="chohyo"] a[data-tema="hoken"]{--t:#86a8ff} html.dark[data-lab="chohyo"] a[data-tema="kabe"]{--t:#ffbf47}
[data-lab="chohyo"] .chips a{border-radius:0}
[data-lab="chohyo"] .chips a[data-tema]:not([data-tema="neutral"]){box-shadow:inset 3px 0 0 var(--t)}
[data-lab="chohyo"] .grid a[data-tema]:not([data-tema="neutral"]){box-shadow:inset 0 4px 0 var(--t)}
[data-lab="chohyo"] .slist a[data-tema]:not([data-tema="neutral"]){border-left:3px solid var(--t);padding-left:.5rem}
[data-lab="chohyo"] .mt-g a[data-tema]:not([data-tema="neutral"]){border-left:3px solid var(--t);padding-left:.45rem}

/* ── avisos ── */
[data-lab="chohyo"] .callout{border-radius:0;border-left:4px solid var(--lab-c);background:var(--lab-t)}
[data-lab="chohyo"] .callout.warn{border-left-color:var(--sello)}
[data-lab="chohyo"] .box,[data-lab="chohyo"] .col .box{border-radius:0}

@media (prefers-reduced-motion:reduce){[data-lab="chohyo"] .answer.lab-sello::after{animation:none}}
@media print{[data-lab="chohyo"] .answer::after,[data-lab="chohyo"] .page>main::before{display:none}}

/* keisan24 · laboratorio — piel «帳票»: formulario con la rejilla impresa en color. 02-10-2026.
   Un color de tinta por tema (給与 緑・税金 朱・社会保険 藍・年収の壁 山吹), hoja blanca sobre gris frío,
   la cifra en tinta con doble raya de total y el sello 「済」 cuando termina el cálculo.
   Todo cuelga de html[data-lab="mezcla"]; data-tema lo pone lab/construir.mjs. */

html[data-lab="mezcla"]{
  --paper:#e9ecef; --sheet:#fff; --sunk:#f4f6f8;
  --line:#cfd5dc; --line2:#e3e7ec; --ctl:#9aa3ad;
  --ink:#14171c; --ink2:#2f3540; --muted:#4f5763; --dim:#5f6670;
  --nav-bg:#1b1f26; --nav-ink:#d9dde3; --nav-on:#fff; --nav-hover:#2a2f38;
  --sello:#c8281e;
  /* tinta por defecto (portada, páginas del sitio): 朱 del logo */
  --lab-c:#c8361d; --lab-d:#9f2812; --lab-t:#fcece7; --lab-l:#f1c2b6; --lab-on:#fff;
}
html[data-lab="mezcla"][data-tema="kyuyo"]{--lab-c:#0a7d45; --lab-d:#06592f; --lab-t:#e6f4ec; --lab-l:#a9d8bd; --lab-on:#fff}
html[data-lab="mezcla"][data-tema="zei"]{--lab-c:#c8361d; --lab-d:#9f2812; --lab-t:#fcece7; --lab-l:#f1c2b6; --lab-on:#fff}
html[data-lab="mezcla"][data-tema="hoken"]{--lab-c:#1d55c8; --lab-d:#153f97; --lab-t:#e8eefb; --lab-l:#b4c7ef; --lab-on:#fff}
html[data-lab="mezcla"][data-tema="kabe"]{--lab-c:#e39300; --lab-d:#7a4d00; --lab-t:#fdf3db; --lab-l:#f3cf87; --lab-on:#1a1206}

html.dark[data-lab="mezcla"]{
  --paper:#0f1215; --sheet:#171b20; --sunk:#1e2329;
  --line:#343b44; --line2:#272d35; --ctl:#59616b;
  --ink:#eef0f2; --ink2:#d3d8de; --muted:#a9b0b9; --dim:#959ca6;
  --nav-bg:#0a0c0f; --nav-hover:#1d2127; --sello:#ff6b5e;
  --lab-c:#ff8466; --lab-d:#ffb4a1; --lab-t:#2d1c18; --lab-l:#5a3329; --lab-on:#1a0d09;
}
html.dark[data-lab="mezcla"][data-tema="kyuyo"]{--lab-c:#52c98b; --lab-d:#9be3bc; --lab-t:#14261c; --lab-l:#2c5a41; --lab-on:#06170e}
html.dark[data-lab="mezcla"][data-tema="zei"]{--lab-c:#ff8466; --lab-d:#ffb4a1; --lab-t:#2d1c18; --lab-l:#5a3329; --lab-on:#1a0d09}
html.dark[data-lab="mezcla"][data-tema="hoken"]{--lab-c:#86a8ff; --lab-d:#bccfff; --lab-t:#18213a; --lab-l:#33467a; --lab-on:#0b1226}
html.dark[data-lab="mezcla"][data-tema="kabe"]{--lab-c:#ffbf47; --lab-d:#ffd98f; --lab-t:#2c2310; --lab-l:#5e4a1d; --lab-on:#1a1206}

/* ── cabecera: barra de navegación en 墨 y la franja índice de los cuatro temas ── */
[data-lab="mezcla"] .gnav{background:var(--nav-bg)}
[data-lab="mezcla"] .gnav::after{content:"";display:block;height:4px;
  background:linear-gradient(90deg,#0a7d45 0 25%,#c8361d 25% 50%,#1d55c8 50% 75%,#e39300 75% 100%)}
html.dark[data-lab="mezcla"] .gnav::after{
  background:linear-gradient(90deg,#52c98b 0 25%,#ff8466 25% 50%,#86a8ff 50% 75%,#ffbf47 75% 100%)}
[data-lab="mezcla"] .gnav-in>ul a[aria-current]::after{background:var(--lab-c);height:3px}
[data-lab="mezcla"] .gnav-in>ul a[data-tema="kyuyo"]:hover{box-shadow:inset 0 -3px 0 #0a7d45}
[data-lab="mezcla"] .gnav-in>ul a[data-tema="zei"]:hover{box-shadow:inset 0 -3px 0 #c8361d}
[data-lab="mezcla"] .gnav-in>ul a[data-tema="hoken"]:hover{box-shadow:inset 0 -3px 0 #1d55c8}
[data-lab="mezcla"] .gnav-in>ul a[data-tema="kabe"]:hover{box-shadow:inset 0 -3px 0 #e39300}

/* ── la hoja: banda de color arriba y la pestaña del tema ── */
[data-lab="mezcla"] .page>main{border-radius:0;border-top:5px solid var(--lab-c);position:relative}
[data-lab="mezcla"][data-tema] .page>main::before{position:absolute;top:-5px;right:var(--pad);
  padding:.1rem .7rem .2rem;background:var(--lab-c);color:var(--lab-on);
  font:700 .72rem/1.5 var(--sans);letter-spacing:.14em;border-radius:0 0 2px 2px}
[data-lab="mezcla"][data-tema="kyuyo"] .page>main::before{content:"給与"}
[data-lab="mezcla"][data-tema="zei"] .page>main::before{content:"税金"}
[data-lab="mezcla"][data-tema="hoken"] .page>main::before{content:"社会保険"}
[data-lab="mezcla"][data-tema="kabe"] .page>main::before{content:"年収の壁"}
[data-lab="mezcla"] h1 .tag{color:var(--lab-d)}

/* ── títulos de sección: casilla de color + raya en tinta del tema ── */
[data-lab="mezcla"] h2{border-bottom:1px solid var(--lab-l);padding-left:.85rem}
[data-lab="mezcla"] h2::after{left:0;top:.28em;bottom:auto;width:5px;height:1.05em;background:var(--lab-c)}
[data-lab="mezcla"] .col h2{padding-left:.75rem}
[data-lab="mezcla"] .col h2::after{width:4px}

/* ── el resultado: casilla de formulario con su rótulo, doble raya de total y sello ── */
[data-lab="mezcla"] .answer,[data-lab="mezcla"] .answer.alt{--pd:clamp(18px,3.8vw,28px);background:var(--sheet);
  border:2px solid var(--lab-c);border-radius:0;position:relative;padding:var(--pd)}
/* el rótulo va pegado a la esquina como en un formulario, pero en el flujo: si ocupa dos líneas empuja la cifra */
[data-lab="mezcla"] .answer .k{display:table;max-width:calc(100% - 3.4rem);margin:calc(-1 * var(--pd)) 0 .45rem calc(-1 * var(--pd));
  background:var(--lab-c);color:var(--lab-on);padding:.16rem .65rem .2rem;font-size:.74rem;letter-spacing:.06em;line-height:1.5}
[data-lab="mezcla"] .answer .v,[data-lab="mezcla"] .answer.alt .v{color:var(--ink);border-bottom:5px double var(--lab-c)}
[data-lab="mezcla"] .answer .v small{color:var(--muted)}
[data-lab="mezcla"] .answer .s{border-top:1px solid var(--lab-l);padding-top:.5rem;margin-top:.6rem}
[data-lab="mezcla"] .answer .s+.s{border-top:1px dashed var(--line2);margin-top:.35rem;padding-top:.35rem}
[data-lab="mezcla"] .answer .s b{color:var(--ink)}
/* sello 「済」: aparece cuando la cifra termina (lab.js pone .lab-sello) */
[data-lab="mezcla"] .answer::after{content:"済";position:absolute;top:.55rem;right:.7rem;width:2.5rem;height:2.5rem;
  display:grid;place-items:center;border:2px solid var(--sello);border-radius:50%;color:var(--sello);
  font:700 1.15rem/1 var(--sans);transform:rotate(-14deg);opacity:0;pointer-events:none}
[data-lab="mezcla"] .answer.lab-sello::after{opacity:.88;animation:lab-sello .34s cubic-bezier(.2,1.6,.4,1)}
@keyframes lab-sello{0%{transform:rotate(-14deg) scale(1.7);opacity:0}100%{transform:rotate(-14deg) scale(1);opacity:.88}}
[data-lab="mezcla"] .lab-dif{border-color:var(--lab-l);background:var(--lab-t);color:var(--ink)}

/* ── la entrada: el 升目 con la rejilla en la tinta del tema ── */
[data-lab="mezcla"] .form{background:var(--lab-l);border-color:var(--lab-c);border-radius:0}
[data-lab="mezcla"] .form dt{background:var(--lab-t);color:var(--lab-d)}
html.dark[data-lab="mezcla"] .form dt{color:var(--lab-d)}
[data-lab="mezcla"] input[type=number],[data-lab="mezcla"] select{border-radius:0}
[data-lab="mezcla"] input[type=number]:focus,[data-lab="mezcla"] select:focus{outline:2px solid var(--lab-c);outline-offset:1px;border-color:var(--lab-c)}
[data-lab="mezcla"] input[type=range]{accent-color:var(--lab-c)}

/* ── tablas: cabecera teñida, raya de tinta, total con doble raya ── */
[data-lab="mezcla"] thead th{background:var(--lab-t);color:var(--lab-d);border-bottom:2px solid var(--lab-c)}
[data-lab="mezcla"] tr.actual>td,[data-lab="mezcla"] tr.actual>th{background:var(--lab-t)}
[data-lab="mezcla"] tr.actual>td:first-child,[data-lab="mezcla"] tr.actual>th:first-child{box-shadow:inset 4px 0 0 var(--lab-c)}
[data-lab="mezcla"] tr.tot td,[data-lab="mezcla"] tr.tot th{border-top:3px double var(--lab-c)}

/* ── chips, lista lateral y tarjetas: cada enlace lleva el color de SU tema ── */
[data-lab="mezcla"] a[data-tema="kyuyo"]{--t:#0a7d45} [data-lab="mezcla"] a[data-tema="zei"]{--t:#c8361d}
[data-lab="mezcla"] a[data-tema="hoken"]{--t:#1d55c8} [data-lab="mezcla"] a[data-tema="kabe"]{--t:#e39300}
html.dark[data-lab="mezcla"] a[data-tema="kyuyo"]{--t:#52c98b} html.dark[data-lab="mezcla"] a[data-tema="zei"]{--t:#ff8466}
html.dark[data-lab="mezcla"] a[data-tema="hoken"]{--t:#86a8ff} html.dark[data-lab="mezcla"] a[data-tema="kabe"]{--t:#ffbf47}
[data-lab="mezcla"] .chips a{border-radius:0}
[data-lab="mezcla"] .chips a[data-tema]:not([data-tema="neutral"]){box-shadow:inset 3px 0 0 var(--t)}
[data-lab="mezcla"] .grid a[data-tema]:not([data-tema="neutral"]){box-shadow:inset 0 4px 0 var(--t)}
[data-lab="mezcla"] .slist a[data-tema]:not([data-tema="neutral"]){border-left:3px solid var(--t);padding-left:.5rem}
[data-lab="mezcla"] .mt-g a[data-tema]:not([data-tema="neutral"]){border-left:3px solid var(--t);padding-left:.45rem}

/* ── avisos ── */
[data-lab="mezcla"] .callout{border-radius:0;border-left:4px solid var(--lab-c);background:var(--lab-t)}
[data-lab="mezcla"] .callout.warn{border-left-color:var(--sello)}
[data-lab="mezcla"] .box,[data-lab="mezcla"] .col .box{border-radius:0}

@media (prefers-reduced-motion:reduce){[data-lab="mezcla"] .answer.lab-sello::after{animation:none}}
@media print{[data-lab="mezcla"] .answer::after,[data-lab="mezcla"] .page>main::before{display:none}}

/* keisan24 · laboratorio — piel C″: la de 帳票 (construir.mjs copia chohyo.css con el nombre «mezcla»)
   más dos cosas de 路線色:
   1. los círculos de color del tema en el menú y en los enlaces a otras calculadoras;
   2. el resultado con fondo del color del tema, el rótulo como franja de lado a lado y el sello
      「済」 estampado sobre el borde de la franja.
   Aquí solo van las diferencias con 帳票. */

/* ── 1. menú: cada sección con el círculo de su línea (colores claros: el menú es oscuro) ── */
[data-lab="mezcla"] .gnav-in>ul a{display:flex;align-items:center;gap:.45em}
[data-lab="mezcla"] .gnav-in>ul a[data-tema]::before{content:"";flex:0 0 auto;width:.62em;height:.62em;border-radius:50%;
  border:3px solid var(--tn,#8a929c);background:var(--nav-bg)}
[data-lab="mezcla"] .gnav a[data-tema="kyuyo"]{--tn:#52c98b}
[data-lab="mezcla"] .gnav a[data-tema="zei"]{--tn:#ff8466}
[data-lab="mezcla"] .gnav a[data-tema="hoken"]{--tn:#86a8ff}
[data-lab="mezcla"] .gnav a[data-tema="kabe"]{--tn:#ffbf47}
[data-lab="mezcla"] .gnav-in>ul a[data-tema]:hover{box-shadow:none}

/* enlaces a otras calculadoras: círculo en vez de la raya lateral */
[data-lab="mezcla"] .chips a[data-tema]:not([data-tema="neutral"]){box-shadow:none}
[data-lab="mezcla"] .slist a[data-tema]:not([data-tema="neutral"]),
[data-lab="mezcla"] .mt-g a[data-tema]:not([data-tema="neutral"]){border-left:0;padding-left:0}
[data-lab="mezcla"] .chips a[data-tema]:not([data-tema="neutral"])::before,
[data-lab="mezcla"] .slist a[data-tema]:not([data-tema="neutral"])::before,
[data-lab="mezcla"] .mt-g a[data-tema]:not([data-tema="neutral"])::before{content:"";display:inline-block;width:.55em;height:.55em;
  margin-right:.45em;border-radius:50%;border:2.5px solid var(--t);background:var(--sheet);vertical-align:.02em}

/* ── 2. el resultado: fondo del tema, franja del rótulo de lado a lado, sello sobre el borde ── */
/* 16 % del color del tema sobre la hoja (claro y oscuro). Medido: --muted ≥ 5.5:1 en los 8 casos;
   --dim baja de 4.5 en oscuro, por eso dentro del resultado el gris pequeño usa --muted. */
[data-lab="mezcla"] .answer,[data-lab="mezcla"] .answer.alt{background:color-mix(in srgb,var(--lab-c) 16%,var(--sheet))}
[data-lab="mezcla"] .answer .lab-dist-ej{color:var(--muted)}
[data-lab="mezcla"] .answer .k{display:block;max-width:none;margin:calc(-1 * var(--pd)) calc(-1 * var(--pd)) .65rem;
  padding:.34rem 3.5rem .36rem var(--pd);font-size:.8rem;line-height:1.5}
[data-lab="mezcla"] .answer::after{top:.3rem;right:.7rem;width:2.4rem;height:2.4rem;background:var(--sheet)}
[data-lab="mezcla"] .lab-dif{background:var(--sheet)}

/* keisan24 · laboratorio — piel «帳票»: formulario con la rejilla impresa en color. 02-10-2026.
   Un color de tinta por tema (給与 緑・税金 朱・社会保険 藍・年収の壁 山吹), hoja blanca sobre gris frío,
   la cifra en tinta con doble raya de total y el sello 「済」 cuando termina el cálculo.
   Todo cuelga de html[data-lab="dento"]; data-tema lo pone lab/construir.mjs. */

html[data-lab="dento"]{
  --paper:#e9ecef; --sheet:#fff; --sunk:#f4f6f8;
  --line:#cfd5dc; --line2:#e3e7ec; --ctl:#9aa3ad;
  --ink:#14171c; --ink2:#2f3540; --muted:#4f5763; --dim:#5f6670;
  --nav-bg:#1b1f26; --nav-ink:#d9dde3; --nav-on:#fff; --nav-hover:#2a2f38;
  --sello:#c8281e;
  /* tinta por defecto (portada, páginas del sitio): 朱 del logo */
  --lab-c:#c8361d; --lab-d:#9f2812; --lab-t:#fcece7; --lab-l:#f1c2b6; --lab-on:#fff;
}
html[data-lab="dento"][data-tema="kyuyo"]{--lab-c:#0a7d45; --lab-d:#06592f; --lab-t:#e6f4ec; --lab-l:#a9d8bd; --lab-on:#fff}
html[data-lab="dento"][data-tema="zei"]{--lab-c:#c8361d; --lab-d:#9f2812; --lab-t:#fcece7; --lab-l:#f1c2b6; --lab-on:#fff}
html[data-lab="dento"][data-tema="hoken"]{--lab-c:#1d55c8; --lab-d:#153f97; --lab-t:#e8eefb; --lab-l:#b4c7ef; --lab-on:#fff}
html[data-lab="dento"][data-tema="kabe"]{--lab-c:#e39300; --lab-d:#7a4d00; --lab-t:#fdf3db; --lab-l:#f3cf87; --lab-on:#1a1206}

html.dark[data-lab="dento"]{
  --paper:#0f1215; --sheet:#171b20; --sunk:#1e2329;
  --line:#343b44; --line2:#272d35; --ctl:#59616b;
  --ink:#eef0f2; --ink2:#d3d8de; --muted:#a9b0b9; --dim:#959ca6;
  --nav-bg:#0a0c0f; --nav-hover:#1d2127; --sello:#ff6b5e;
  --lab-c:#ff8466; --lab-d:#ffb4a1; --lab-t:#2d1c18; --lab-l:#5a3329; --lab-on:#1a0d09;
}
html.dark[data-lab="dento"][data-tema="kyuyo"]{--lab-c:#52c98b; --lab-d:#9be3bc; --lab-t:#14261c; --lab-l:#2c5a41; --lab-on:#06170e}
html.dark[data-lab="dento"][data-tema="zei"]{--lab-c:#ff8466; --lab-d:#ffb4a1; --lab-t:#2d1c18; --lab-l:#5a3329; --lab-on:#1a0d09}
html.dark[data-lab="dento"][data-tema="hoken"]{--lab-c:#86a8ff; --lab-d:#bccfff; --lab-t:#18213a; --lab-l:#33467a; --lab-on:#0b1226}
html.dark[data-lab="dento"][data-tema="kabe"]{--lab-c:#ffbf47; --lab-d:#ffd98f; --lab-t:#2c2310; --lab-l:#5e4a1d; --lab-on:#1a1206}

/* ── cabecera: barra de navegación en 墨 y la franja índice de los cuatro temas ── */
[data-lab="dento"] .gnav{background:var(--nav-bg)}
[data-lab="dento"] .gnav::after{content:"";display:block;height:4px;
  background:linear-gradient(90deg,#0a7d45 0 25%,#c8361d 25% 50%,#1d55c8 50% 75%,#e39300 75% 100%)}
html.dark[data-lab="dento"] .gnav::after{
  background:linear-gradient(90deg,#52c98b 0 25%,#ff8466 25% 50%,#86a8ff 50% 75%,#ffbf47 75% 100%)}
[data-lab="dento"] .gnav-in>ul a[aria-current]::after{background:var(--lab-c);height:3px}
[data-lab="dento"] .gnav-in>ul a[data-tema="kyuyo"]:hover{box-shadow:inset 0 -3px 0 #0a7d45}
[data-lab="dento"] .gnav-in>ul a[data-tema="zei"]:hover{box-shadow:inset 0 -3px 0 #c8361d}
[data-lab="dento"] .gnav-in>ul a[data-tema="hoken"]:hover{box-shadow:inset 0 -3px 0 #1d55c8}
[data-lab="dento"] .gnav-in>ul a[data-tema="kabe"]:hover{box-shadow:inset 0 -3px 0 #e39300}

/* ── la hoja: banda de color arriba y la pestaña del tema ── */
[data-lab="dento"] .page>main{border-radius:0;border-top:5px solid var(--lab-c);position:relative}
[data-lab="dento"][data-tema] .page>main::before{position:absolute;top:-5px;right:var(--pad);
  padding:.1rem .7rem .2rem;background:var(--lab-c);color:var(--lab-on);
  font:700 .72rem/1.5 var(--sans);letter-spacing:.14em;border-radius:0 0 2px 2px}
[data-lab="dento"][data-tema="kyuyo"] .page>main::before{content:"給与"}
[data-lab="dento"][data-tema="zei"] .page>main::before{content:"税金"}
[data-lab="dento"][data-tema="hoken"] .page>main::before{content:"社会保険"}
[data-lab="dento"][data-tema="kabe"] .page>main::before{content:"年収の壁"}
[data-lab="dento"] h1 .tag{color:var(--lab-d)}

/* ── títulos de sección: casilla de color + raya en tinta del tema ── */
[data-lab="dento"] h2{border-bottom:1px solid var(--lab-l);padding-left:.85rem}
[data-lab="dento"] h2::after{left:0;top:.28em;bottom:auto;width:5px;height:1.05em;background:var(--lab-c)}
[data-lab="dento"] .col h2{padding-left:.75rem}
[data-lab="dento"] .col h2::after{width:4px}

/* ── el resultado: casilla de formulario con su rótulo, doble raya de total y sello ── */
[data-lab="dento"] .answer,[data-lab="dento"] .answer.alt{--pd:clamp(18px,3.8vw,28px);background:var(--sheet);
  border:2px solid var(--lab-c);border-radius:0;position:relative;padding:var(--pd)}
/* el rótulo va pegado a la esquina como en un formulario, pero en el flujo: si ocupa dos líneas empuja la cifra */
[data-lab="dento"] .answer .k{display:table;max-width:calc(100% - 3.4rem);margin:calc(-1 * var(--pd)) 0 .45rem calc(-1 * var(--pd));
  background:var(--lab-c);color:var(--lab-on);padding:.16rem .65rem .2rem;font-size:.74rem;letter-spacing:.06em;line-height:1.5}
[data-lab="dento"] .answer .v,[data-lab="dento"] .answer.alt .v{color:var(--ink);border-bottom:5px double var(--lab-c)}
[data-lab="dento"] .answer .v small{color:var(--muted)}
[data-lab="dento"] .answer .s{border-top:1px solid var(--lab-l);padding-top:.5rem;margin-top:.6rem}
[data-lab="dento"] .answer .s+.s{border-top:1px dashed var(--line2);margin-top:.35rem;padding-top:.35rem}
[data-lab="dento"] .answer .s b{color:var(--ink)}
/* sello 「済」: aparece cuando la cifra termina (lab.js pone .lab-sello) */
[data-lab="dento"] .answer::after{content:"済";position:absolute;top:.55rem;right:.7rem;width:2.5rem;height:2.5rem;
  display:grid;place-items:center;border:2px solid var(--sello);border-radius:50%;color:var(--sello);
  font:700 1.15rem/1 var(--sans);transform:rotate(-14deg);opacity:0;pointer-events:none}
[data-lab="dento"] .answer.lab-sello::after{opacity:.88;animation:lab-sello .34s cubic-bezier(.2,1.6,.4,1)}
@keyframes lab-sello{0%{transform:rotate(-14deg) scale(1.7);opacity:0}100%{transform:rotate(-14deg) scale(1);opacity:.88}}
[data-lab="dento"] .lab-dif{border-color:var(--lab-l);background:var(--lab-t);color:var(--ink)}

/* ── la entrada: el 升目 con la rejilla en la tinta del tema ── */
[data-lab="dento"] .form{background:var(--lab-l);border-color:var(--lab-c);border-radius:0}
[data-lab="dento"] .form dt{background:var(--lab-t);color:var(--lab-d)}
html.dark[data-lab="dento"] .form dt{color:var(--lab-d)}
[data-lab="dento"] input[type=number],[data-lab="dento"] select{border-radius:0}
[data-lab="dento"] input[type=number]:focus,[data-lab="dento"] select:focus{outline:2px solid var(--lab-c);outline-offset:1px;border-color:var(--lab-c)}
[data-lab="dento"] input[type=range]{accent-color:var(--lab-c)}

/* ── tablas: cabecera teñida, raya de tinta, total con doble raya ── */
[data-lab="dento"] thead th{background:var(--lab-t);color:var(--lab-d);border-bottom:2px solid var(--lab-c)}
[data-lab="dento"] tr.actual>td,[data-lab="dento"] tr.actual>th{background:var(--lab-t)}
[data-lab="dento"] tr.actual>td:first-child,[data-lab="dento"] tr.actual>th:first-child{box-shadow:inset 4px 0 0 var(--lab-c)}
[data-lab="dento"] tr.tot td,[data-lab="dento"] tr.tot th{border-top:3px double var(--lab-c)}

/* ── chips, lista lateral y tarjetas: cada enlace lleva el color de SU tema ── */
[data-lab="dento"] a[data-tema="kyuyo"]{--t:#0a7d45} [data-lab="dento"] a[data-tema="zei"]{--t:#c8361d}
[data-lab="dento"] a[data-tema="hoken"]{--t:#1d55c8} [data-lab="dento"] a[data-tema="kabe"]{--t:#e39300}
html.dark[data-lab="dento"] a[data-tema="kyuyo"]{--t:#52c98b} html.dark[data-lab="dento"] a[data-tema="zei"]{--t:#ff8466}
html.dark[data-lab="dento"] a[data-tema="hoken"]{--t:#86a8ff} html.dark[data-lab="dento"] a[data-tema="kabe"]{--t:#ffbf47}
[data-lab="dento"] .chips a{border-radius:0}
[data-lab="dento"] .chips a[data-tema]:not([data-tema="neutral"]){box-shadow:inset 3px 0 0 var(--t)}
[data-lab="dento"] .grid a[data-tema]:not([data-tema="neutral"]){box-shadow:inset 0 4px 0 var(--t)}
[data-lab="dento"] .slist a[data-tema]:not([data-tema="neutral"]){border-left:3px solid var(--t);padding-left:.5rem}
[data-lab="dento"] .mt-g a[data-tema]:not([data-tema="neutral"]){border-left:3px solid var(--t);padding-left:.45rem}

/* ── avisos ── */
[data-lab="dento"] .callout{border-radius:0;border-left:4px solid var(--lab-c);background:var(--lab-t)}
[data-lab="dento"] .callout.warn{border-left-color:var(--sello)}
[data-lab="dento"] .box,[data-lab="dento"] .col .box{border-radius:0}

@media (prefers-reduced-motion:reduce){[data-lab="dento"] .answer.lab-sello::after{animation:none}}
@media print{[data-lab="dento"] .answer::after,[data-lab="dento"] .page>main::before{display:none}}

/* keisan24 · laboratorio — piel C″: la de 帳票 (construir.mjs copia chohyo.css con el nombre «mezcla»)
   más dos cosas de 路線色:
   1. los círculos de color del tema en el menú y en los enlaces a otras calculadoras;
   2. el resultado con fondo del color del tema, el rótulo como franja de lado a lado y el sello
      「済」 estampado sobre el borde de la franja.
   Aquí solo van las diferencias con 帳票. */

/* ── 1. menú: cada sección con el círculo de su línea (colores claros: el menú es oscuro) ── */
[data-lab="dento"] .gnav-in>ul a{display:flex;align-items:center;gap:.45em}
[data-lab="dento"] .gnav-in>ul a[data-tema]::before{content:"";flex:0 0 auto;width:.62em;height:.62em;border-radius:50%;
  border:3px solid var(--tn,#8a929c);background:var(--nav-bg)}
[data-lab="dento"] .gnav a[data-tema="kyuyo"]{--tn:#52c98b}
[data-lab="dento"] .gnav a[data-tema="zei"]{--tn:#ff8466}
[data-lab="dento"] .gnav a[data-tema="hoken"]{--tn:#86a8ff}
[data-lab="dento"] .gnav a[data-tema="kabe"]{--tn:#ffbf47}
[data-lab="dento"] .gnav-in>ul a[data-tema]:hover{box-shadow:none}

/* enlaces a otras calculadoras: círculo en vez de la raya lateral */
[data-lab="dento"] .chips a[data-tema]:not([data-tema="neutral"]){box-shadow:none}
[data-lab="dento"] .slist a[data-tema]:not([data-tema="neutral"]),
[data-lab="dento"] .mt-g a[data-tema]:not([data-tema="neutral"]){border-left:0;padding-left:0}
[data-lab="dento"] .chips a[data-tema]:not([data-tema="neutral"])::before,
[data-lab="dento"] .slist a[data-tema]:not([data-tema="neutral"])::before,
[data-lab="dento"] .mt-g a[data-tema]:not([data-tema="neutral"])::before{content:"";display:inline-block;width:.55em;height:.55em;
  margin-right:.45em;border-radius:50%;border:2.5px solid var(--t);background:var(--sheet);vertical-align:.02em}

/* ── 2. el resultado: fondo del tema, franja del rótulo de lado a lado, sello sobre el borde ── */
/* 16 % del color del tema sobre la hoja (claro y oscuro). Medido: --muted ≥ 5.5:1 en los 8 casos;
   --dim baja de 4.5 en oscuro, por eso dentro del resultado el gris pequeño usa --muted. */
[data-lab="dento"] .answer,[data-lab="dento"] .answer.alt{background:color-mix(in srgb,var(--lab-c) 16%,var(--sheet))}
[data-lab="dento"] .answer .lab-dist-ej{color:var(--muted)}
[data-lab="dento"] .answer .k{display:block;max-width:none;margin:calc(-1 * var(--pd)) calc(-1 * var(--pd)) .65rem;
  padding:.34rem 3.5rem .36rem var(--pd);font-size:.8rem;line-height:1.5}
[data-lab="dento"] .answer::after{top:.3rem;right:.7rem;width:2.4rem;height:2.4rem;background:var(--sheet)}
[data-lab="dento"] .lab-dif{background:var(--sheet)}

/* keisan24 · laboratorio — piel D «伝統色»: la misma C″ (construir.mjs copia chohyo.css + mezcla.css con
   el nombre «dento») con colores tradicionales profundos y apagados, como en bancos y documentos oficiales:
   給与 深緑・税金 紫（古代紫）・社会保険 紺・年収の壁 黄土, y 墨 en las páginas sin tema.
   SIN ROJO en los temas: en Japón el rojo es peligro y 赤字 (pérdida); un impuesto en rojo se lee como alarma.
   El 紫 es el color de rango y dignidad: calza con lo oficial. Fondos más tenues y la franja del menú más fina.
   El sello 「済」 sigue en 朱 (es el color del 朱肉). Contraste medido: texto blanco sobre el color ≥ 5,6:1;
   --muted sobre el fondo del resultado ≥ 6,2:1 (claro y oscuro). */

html[data-lab="dento"]{--lab-c:#343a42; --lab-d:#2a2f36; --lab-t:#f1f1f2; --lab-l:#c2c4c6; --lab-on:#fff}
html[data-lab="dento"][data-tema="kyuyo"]{--lab-c:#235e45; --lab-d:#1d4f3a; --lab-t:#edf3f0; --lab-l:#bcd0c6; --lab-on:#fff}
html[data-lab="dento"][data-tema="zei"]{--lab-c:#5b3a6e; --lab-d:#4c3060; --lab-t:#f4f1f5; --lab-l:#cec4d4; --lab-on:#fff}
html[data-lab="dento"][data-tema="hoken"]{--lab-c:#253f6e; --lab-d:#1f355d; --lab-t:#edf0f5; --lab-l:#bdc6d6; --lab-on:#fff}
html[data-lab="dento"][data-tema="kabe"]{--lab-c:#86601a; --lab-d:#6f4f15; --lab-t:#f5f1e9; --lab-l:#d9cba9; --lab-on:#fff}

html.dark[data-lab="dento"]{--lab-c:#c3c9d1; --lab-d:#dbdfe3; --lab-t:#25292e; --lab-l:#474c52; --lab-on:#111418}
html.dark[data-lab="dento"][data-tema="kyuyo"]{--lab-c:#86c4a6; --lab-d:#b6dccb; --lab-t:#1a2622; --lab-l:#33493f; --lab-on:#111418}
html.dark[data-lab="dento"][data-tema="zei"]{--lab-c:#c3a5d3; --lab-d:#dbc9e5; --lab-t:#25262e; --lab-l:#474252; --lab-on:#111418}
html.dark[data-lab="dento"][data-tema="hoken"]{--lab-c:#a3b8e0; --lab-d:#c7d4ee; --lab-t:#1c2230; --lab-l:#38435c; --lab-on:#111418}
html.dark[data-lab="dento"][data-tema="kabe"]{--lab-c:#dcb878; --lab-d:#ead2a6; --lab-t:#26231c; --lab-l:#4c4330; --lab-on:#111418}

/* menú: franja más fina, en los cuatro colores profundos */
[data-lab="dento"] .gnav::after{height:3px;background:linear-gradient(90deg,#235e45 0 25%,#5b3a6e 25% 50%,#253f6e 50% 75%,#86601a 75% 100%)}
html.dark[data-lab="dento"] .gnav::after{background:linear-gradient(90deg,#86c4a6 0 25%,#c3a5d3 25% 50%,#a3b8e0 50% 75%,#dcb878 75% 100%)}
[data-lab="dento"] .gnav a[data-tema="kyuyo"]{--tn:#86c4a6}
[data-lab="dento"] .gnav a[data-tema="zei"]{--tn:#c3a5d3}
[data-lab="dento"] .gnav a[data-tema="hoken"]{--tn:#a3b8e0}
[data-lab="dento"] .gnav a[data-tema="kabe"]{--tn:#dcb878}

/* enlaces a otras calculadoras: el círculo en el color profundo de SU tema */
[data-lab="dento"] a[data-tema="kyuyo"]{--t:#235e45} [data-lab="dento"] a[data-tema="zei"]{--t:#5b3a6e}
[data-lab="dento"] a[data-tema="hoken"]{--t:#253f6e} [data-lab="dento"] a[data-tema="kabe"]{--t:#86601a}
html.dark[data-lab="dento"] a[data-tema="kyuyo"]{--t:#86c4a6} html.dark[data-lab="dento"] a[data-tema="zei"]{--t:#c3a5d3}
html.dark[data-lab="dento"] a[data-tema="hoken"]{--t:#a3b8e0} html.dark[data-lab="dento"] a[data-tema="kabe"]{--t:#dcb878}

/* el resultado: fondo apenas teñido (9 %), la franja del rótulo y el sello como en C″ */
[data-lab="dento"] .answer,[data-lab="dento"] .answer.alt{background:color-mix(in srgb,var(--lab-c) 9%,var(--sheet))}
html.dark[data-lab="dento"] .answer,html.dark[data-lab="dento"] .answer.alt{background:color-mix(in srgb,var(--lab-c) 10%,var(--sheet))}

/* sin rojo tampoco en los avisos y en «必須»: el color del tema (los avisos de cuidado van en 黄土) */
[data-lab="dento"] .req{background:var(--lab-c);color:var(--lab-on);border-color:var(--lab-c)}
[data-lab="dento"] .callout.warn{border-left-color:#86601a;background:#f5f1e9}
html.dark[data-lab="dento"] .callout.warn{border-left-color:#dcb878;background:#26231c}
[data-lab="dento"] h1 .tag{color:var(--lab-d)}