/* ═══════════════════════════════════════════════════════════════════════════════
   piel.css · El acento y la piel sobria (26-sep-2026)

   Aquí vive una sola cosa que no cabía en guias.css: los TRES TONOS de acento y
   las cuatro reglas de la página de muestra (docs/estilo/). Se carga la última,
   así que manda sobre guias.css y tema.css sin tocar ninguna de sus reglas.

   Cómo se cambia el tono:
     · El sitio entero usa el tono A (los valores están en :root, en guias.css).
     · Cualquier contenedor con `data-tono="a|b|c"` repinta su acento y todo lo que
       cuelga de él (cajas, pastillas, enlaces, plegables, gráficos) sin recargar.
       Los tres tonos están medidos: el acento como texto pasa 4,5:1 en oscuro y
       en claro (ver el informe de la pasada de piel).

   Tonos (el nominal es el del borde y el relleno; el de texto va subido en oscuro
   y bajado en claro para poder leerse sobre su fondo):
     A · verde azulado apagado  #2f8f86
     B · azul pizarra           #4a6fa5
     C · gris piedra cálido     #7d7268
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── los tres tonos (tema oscuro, que es el de por defecto) ── */
[data-tono="a"]{--ac-base:#2f8f86;--ac:#3fa89d;--ac2:#63c3b7;--ac-suave:rgba(47,143,134,.14);--ac-borde:rgba(47,143,134,.34)}
[data-tono="b"]{--ac-base:#4a6fa5;--ac:#7fa3d6;--ac2:#9cbce6;--ac-suave:rgba(74,111,165,.16);--ac-borde:rgba(74,111,165,.36)}
[data-tono="c"]{--ac-base:#7d7268;--ac:#b0a49a;--ac2:#c6bbb1;--ac-suave:rgba(125,114,104,.18);--ac-borde:rgba(125,114,104,.38)}

/* ── los mismos tonos en el tema claro. El conmutador de la casa pone
      `data-tema="claro"` en <html> y el de Material `data-md-color-scheme="default"`
      en <body>: hay que cubrir los dos o el tono se queda oscuro sobre papel. ── */
[data-tema="claro"] [data-tono="a"],[data-md-color-scheme="default"] [data-tono="a"]{
  --ac:#1f6f68;--ac2:#175b55;--ac-suave:rgba(47,143,134,.10);--ac-borde:rgba(47,143,134,.30)}
[data-tema="claro"] [data-tono="b"],[data-md-color-scheme="default"] [data-tono="b"]{
  --ac:#33568a;--ac2:#2a4671;--ac-suave:rgba(74,111,165,.11);--ac-borde:rgba(74,111,165,.30)}
[data-tema="claro"] [data-tono="c"],[data-md-color-scheme="default"] [data-tono="c"]{
  --ac:#5f564e;--ac2:#4c443d;--ac-suave:rgba(125,114,104,.13);--ac-borde:rgba(125,114,104,.30)}

/* ── UN ACENTO POR GUÍA ───────────────────────────────────────────────────────
   Ocre tostado (hueso), azul pizarra (músculo), teja apagada (cardio) y berenjena
   (el curso de Sapolsky): tonos apagados, en la familia del sitio, no un arcoíris.
   Los cuatro están MEDIDOS con `scripts/verifica-acentos.py`: el acento, usado como
   texto, pasa 4,5:1 en oscuro y en papel.
   Quién los aplica: `scripts/hook-acento.py` lee estos bloques y se los pone a cada
   página según su sección. Los colores NO se repiten en ningún otro fichero: si hay
   que afinarlos, se afinan aquí y solo aquí. ── */
[data-tono="hueso"]{--ac-base:#8a6a3c;--ac:#c8a06a;--ac2:#d8b587;--ac-suave:rgba(138,106,60,.16);--ac-borde:rgba(138,106,60,.38)}
[data-tono="musculo"]{--ac-base:#4a6fa5;--ac:#7fa3d6;--ac2:#9cbce6;--ac-suave:rgba(74,111,165,.16);--ac-borde:rgba(74,111,165,.36)}
[data-tono="cardio"]{--ac-base:#8f4a42;--ac:#d08a80;--ac2:#dda79f;--ac-suave:rgba(143,74,66,.16);--ac-borde:rgba(143,74,66,.38)}
[data-tono="sapolsky"]{--ac-base:#6f5480;--ac:#b394c4;--ac2:#c7aed4;--ac-suave:rgba(111,84,128,.16);--ac-borde:rgba(111,84,128,.38)}
[data-tono="sexo"]{--ac-base:#7a2f96;--ac:#c77ddb;--ac2:#d9a3ea;--ac-suave:rgba(122,47,150,.16);--ac-borde:rgba(122,47,150,.38)}
[data-tema="claro"] [data-tono="hueso"],[data-md-color-scheme="default"] [data-tono="hueso"]{
  --ac:#7a5a2e;--ac2:#644a24;--ac-suave:rgba(138,106,60,.12);--ac-borde:rgba(138,106,60,.32)}
[data-tema="claro"] [data-tono="musculo"],[data-md-color-scheme="default"] [data-tono="musculo"]{
  --ac:#33568a;--ac2:#2a4671;--ac-suave:rgba(74,111,165,.11);--ac-borde:rgba(74,111,165,.30)}
[data-tema="claro"] [data-tono="cardio"],[data-md-color-scheme="default"] [data-tono="cardio"]{
  --ac:#8f3f36;--ac2:#7a352d;--ac-suave:rgba(143,74,66,.11);--ac-borde:rgba(143,74,66,.32)}
[data-tema="claro"] [data-tono="sapolsky"],[data-md-color-scheme="default"] [data-tono="sapolsky"]{
  --ac:#6a4a7a;--ac2:#5a3f68;--ac-suave:rgba(111,84,128,.12);--ac-borde:rgba(111,84,128,.32)}
[data-tema="claro"] [data-tono="sexo"],[data-md-color-scheme="default"] [data-tono="sexo"]{
  --ac:#7a2f96;--ac2:#66257e;--ac-suave:rgba(122,47,150,.12);--ac-borde:rgba(122,47,150,.32)}

/* ── admoniciones `!!! note` (las de Material vienen con su azul y su sombra) ──
   En las guías no había ninguna; la muestra de tono sí las usa. Se pintan con la
   misma piel que las cajas: fondo plano, raya fina a la izquierda y el acento. */
.md-typeset .admonition{
  background:var(--bg2);border:1px solid var(--line);border-left:3px solid var(--ac);
  border-radius:var(--r);box-shadow:none;padding:.8rem 1rem;margin:1.2rem 0;
  font-size:.95rem;color:var(--txt2)}
.md-typeset .admonition>.admonition-title{
  background:none;border:0;margin:0 0 .35rem;padding:0;color:var(--ac);
  font-weight:800;font-size:.95rem;line-height:1.45}
.md-typeset .admonition>.admonition-title::before{display:none}
.md-typeset .admonition.warning,.md-typeset .admonition.caution{border-left-color:var(--aviso)}
.md-typeset .admonition.warning>.admonition-title,
.md-typeset .admonition.caution>.admonition-title{color:var(--aviso)}
.md-typeset .admonition.danger,.md-typeset .admonition.failure{border-left-color:var(--no)}
.md-typeset .admonition.danger>.admonition-title,
.md-typeset .admonition.failure>.admonition-title{color:var(--no)}
.md-typeset .admonition.success,.md-typeset .admonition.tip{border-left-color:var(--ok)}
.md-typeset .admonition.success>.admonition-title,
.md-typeset .admonition.tip>.admonition-title{color:var(--ok)}
.md-typeset .admonition>p:last-child{margin-bottom:0}

/* ── la página de muestra (docs/estilo/) ── */
.muestra-aviso{
  border:1px solid var(--line2);border-left:3px solid var(--aviso);
  background:var(--aviso-suave);border-radius:var(--r);padding:.8rem 1rem;
  margin:0 0 1.4rem;font-size:.92rem;line-height:1.55;color:var(--txt2)}
.muestra-aviso strong{color:var(--txt)}
.tono-card{
  border:1px solid var(--line);border-left:3px solid var(--ac-base);
  border-radius:var(--r2);background:var(--bg2);padding:1rem 1.1rem 1.2rem;margin:1.2rem 0}
.tono-etq{
  display:inline-flex;align-items:center;gap:.5rem;padding:.15em .55em;border-radius:.4rem;
  background:var(--ac-suave);color:var(--ac);font-size:.72rem;font-weight:600;
  line-height:1.5}
.tono-etq::before{
  content:"";display:inline-block;width:.7em;height:.7em;border-radius:2px;background:var(--ac-base)}
/* La etiqueta de cada bloque la pone el CSS desde el propio data-tono: así el texto
   de los tres ejemplos es idéntico en el Markdown y solo cambia el atributo. */
[data-tono="a"] .tono-etq::after{content:"Tono A · verde azulado apagado · #2f8f86"}
[data-tono="b"] .tono-etq::after{content:"Tono B · azul pizarra · #4a6fa5"}
[data-tono="c"] .tono-etq::after{content:"Tono C · gris piedra cálido · #7d7268"}
.tono-card>p:first-of-type{margin:0 0 .55rem}
.tono-card>h4:first-of-type{margin-top:.1rem}
/* La tabla de la muestra tiene tres columnas cortas: nunca impone un ancho mínimo
   (la regla base de las guías es `table{min-width:560px}` y desbordaba a 390 px). */
.tono-card table{min-width:0;width:100%;table-layout:fixed}
@media (max-width:620px){
  .tono-card th,.tono-card td{font-size:.72rem;padding:.35rem .3rem;word-break:break-word;
    white-space:normal}
  .tono-card th{text-transform:none;letter-spacing:0}
}
.tono-nota{font-size:.82rem;color:var(--txt3);margin-top:.6rem}