/* ══════════════════════════════════════════════════════════════════════
   AJUSTES DEL JUGADOR: tema oscuro y tamaño del texto
   Se activan con atributos en <html> (data-tema, data-texto) que pone el
   servidor según lo que cada cual elige en Ajustes. Mesa.css usa variables
   para casi todo el color, así que el tema oscuro solo las redefine, con los
   mismos tonos de cuero que la Forja. Para quitarlo del todo: borrar el
   <link> de este archivo en views/layout/head.php.
   ══════════════════════════════════════════════════════════════════════ */

@media screen {
  :root[data-tema="oscuro"] {
    --bg:#262019; --surface:#312a20; --surface-2:#3a3226; --surface-sunk:#1f1a14;
    --fg:#ece3cc; --fg-2:#d0c5aa; --fg-3:#b5ab92; --fg-4:#a99f87;
    --line:#40382a; --line-2:#4e4534; --line-3:#625742;
    --clay:#e39070; --clay-hi:#eea284; --clay-lo:#dc8664; --clay-bg:#40291f;
    --ultra:#a7b6e6; --ultra-bg:#272d43;
    --gold:#d6b16d; --gold-2:#e4c78a; --gold-bg:#393120; --gold-line:rgba(214,177,109,.45);
    --moss:#a1c48f; --moss-bg:#28331f;
    --wine:#e8918b; --wine-bg:#3c2523;
    color-scheme: dark;
  }
  @media (prefers-color-scheme: dark) {
    :root[data-tema="auto"] {
      --bg:#262019; --surface:#312a20; --surface-2:#3a3226; --surface-sunk:#1f1a14;
      --fg:#ece3cc; --fg-2:#d0c5aa; --fg-3:#b5ab92; --fg-4:#a99f87;
      --line:#40382a; --line-2:#4e4534; --line-3:#625742;
      --clay:#e39070; --clay-hi:#eea284; --clay-lo:#dc8664; --clay-bg:#40291f;
      --ultra:#a7b6e6; --ultra-bg:#272d43;
      --gold:#d6b16d; --gold-2:#e4c78a; --gold-bg:#393120; --gold-line:rgba(214,177,109,.45);
      --moss:#a1c48f; --moss-bg:#28331f;
      --wine:#e8918b; --wine-bg:#3c2523;
      color-scheme: dark;
    }
  }

  /* Los pocos colores que no salen de una variable. */
  :root[data-tema="oscuro"] .btn.pri,
  :root[data-tema="oscuro"] .btn.pri:hover,
  :root[data-tema="oscuro"] .chip.on { color:#1d1912; }
  :root[data-tema="oscuro"] .flash.ok     { border-color:#3d5030; }
  :root[data-tema="oscuro"] .flash.error  { border-color:#5a3532; }
  :root[data-tema="oscuro"] .flash.info   { border-color:#38405c; }
  :root[data-tema="oscuro"] .callout.wine { background:var(--wine-bg); }
  :root[data-tema="oscuro"] body::before  { opacity:.25; }
  :root[data-tema="oscuro"] .rico-enlace .ok { color:#1d1912; }

  @media (prefers-color-scheme: dark) {
    :root[data-tema="auto"] .btn.pri,
    :root[data-tema="auto"] .btn.pri:hover,
    :root[data-tema="auto"] .chip.on { color:#1d1912; }
    :root[data-tema="auto"] .flash.ok     { border-color:#3d5030; }
    :root[data-tema="auto"] .flash.error  { border-color:#5a3532; }
    :root[data-tema="auto"] .flash.info   { border-color:#38405c; }
    :root[data-tema="auto"] .callout.wine { background:var(--wine-bg); }
    :root[data-tema="auto"] body::before  { opacity:.25; }
    :root[data-tema="auto"] .rico-enlace .ok { color:#1d1912; }
  }
}

/* Tamaño del texto: se amplía el contenido, no el menú lateral.
   `zoom` escala también lo que está escrito en píxeles, que en esta hoja es casi todo. */
:root[data-texto="grande"] main { zoom:1.12; }
:root[data-texto="mayor"]  main { zoom:1.28; }

/* Imágenes enlazadas desde otros servidores. */
.fig img.ext { max-width: 100%; height: auto; }
.fig.fig-no { display: inline-block; padding: 6px 10px; font-style: italic; color: var(--fg-3);
  border: 1px dashed var(--line-3); border-radius: 6px; }

/* Editor: botón «Imagen por enlace» con vista previa. */
.rico-imagen { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.rico-imagen[hidden] { display: none; }
.rico-imagen input { flex: 1 1 220px; font-size: 15px; padding: 6px 10px; }
.rico-imagen .p { flex: 1 1 160px; }
.rico-imagen button { border: 1px solid var(--line-3, #c6bca3); background: var(--surface, #fffdf8); color: inherit;
  border-radius: 7px; padding: 6px 12px; cursor: pointer; font: inherit; font-size: 15px; }
.rico-imagen .ok { background: var(--clay, #b1492f); color: #fff; border-color: var(--clay-lo, #8d3520); }
.rico-imagen .ok:disabled { opacity: .45; cursor: not-allowed; }
.rico-imagen .vista { flex: 1 0 100%; font-size: 14px; color: var(--fg-3, #6f6652); min-height: 1.2em; }
.rico-imagen .vista img { display: block; max-width: 100%; max-height: 180px; border-radius: 6px; margin-top: 4px; }
:root[data-tema="oscuro"] .rico-imagen .ok { color: #1d1912; }
@media (prefers-color-scheme: dark) { :root[data-tema="auto"] .rico-imagen .ok { color: #1d1912; } }