/* ==========================================================
   MODO DE TELA — o modo Leitura e a folha de escolha.
   Claro e escuro já moram em paleta.css. O Leitura parte do
   claro (casa com :root:not([data-tema="escuro"]) nas outras
   folhas) e só troca o que muda: papel, tinta e tamanho.
   Carrega por último para empatar e vencer na cascata.
   ========================================================== */
:root[data-tema="leitura"]{
  /* papel, não branco: menos brilho, mesmo contraste de leitura */
  --bg:#F3EBDC; --superficie:#FBF6EC; --superficie2:#F6EEE0; --superficie3:#E8DDC8;
  --linha:#E2D5BE; --linha-forte:#C9B898;
  --texto:#2A2318; --suave:#65584A;
  --marca:#1D4ED8; --marca-texto:#FFFFFF; --marca-fraca:#E1E3EE;
  --ouro:#123C7A; --ouro-fraco:#E1E3EE;
  --ok:#15803D; --ok-fraco:rgba(21,128,61,.12);
  --atraso:#B91C1C; --atraso-fraco:rgba(185,28,28,.10);
  --sombra:0 1px 2px rgba(60,40,10,.06), 0 8px 24px rgba(60,40,10,.07);
  /* o menu fica escuro como nos outros modos, mas em tom de couro */
  --menu-bg:#2B241B; --menu-texto:#B9AD98; --menu-forte:#FFFDF8;
  --menu-ativo:#41372A; --menu-linha:rgba(255,248,235,.14);
  color-scheme:light;
}
/* tons de azul que paleta.css fixou para o claro: no papel viram um azul morno */
:root[data-tema="leitura"] .cel.e-hoje{background:rgba(29,78,216,.06)}
:root[data-tema="leitura"] .grade-cab{background:var(--superficie3)}
:root[data-tema="leitura"] .grade-cab .e-hoje{background:rgba(29,78,216,.12)}

/* Letra maior: todo tamanho de letra da plataforma é em px, então
   aumentar a fonte da página não mudaria nada. O zoom só na área de
   conteúdo aumenta letra, espaço e cartões juntos, sem quebrar o
   menu nem a barra de baixo. No celular é menor para caber em 360px. */
:root[data-tema="leitura"] .area{zoom:1.06}
@media (min-width:900px){ :root[data-tema="leitura"] .area{zoom:1.12} }
:root[data-tema="leitura"] .area p,
:root[data-tema="leitura"] .area li{line-height:1.7}
:root[data-tema="leitura"] dialog .dlg p{line-height:1.65}

/* ---- botão do modo (menu lateral e topo do celular) ---- */
.modo-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.modo-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;display:block;flex:none}
.modo-btn-ic{display:inline-flex}
.modo-btn-ic svg{width:15px;height:15px}

/* ---- folha de escolha ---- */
.modo-lista{display:grid;gap:10px;margin-top:16px}
.modo-op{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--superficie);border:2px solid var(--linha);border-radius:14px;
  padding:10px 12px;cursor:pointer;font:inherit;color:var(--texto);min-height:76px;
  transition:border-color .15s ease}
.modo-op:hover{border-color:var(--linha-forte)}
.modo-op:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
.modo-op[aria-checked="true"]{border-color:var(--marca);background:var(--marca-fraca)}
.modo-txt{flex:1;min-width:0}
.modo-txt b{display:flex;align-items:center;gap:6px;font-family:var(--display);font-size:15px}
.modo-txt b svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.modo-txt small{display:block;margin-top:2px;font-size:12.5px;line-height:1.4;color:var(--suave)}
.modo-uso{flex:none;align-self:flex-start;font-size:11px;font-weight:700;padding:3px 8px;
  border-radius:999px;background:var(--marca);color:var(--marca-texto);visibility:hidden}
.modo-op[aria-checked="true"] .modo-uso{visibility:visible}

/* miniatura: cores fixas de cada modo, para mostrar o resultado antes de tocar */
.modo-mini{flex:none;width:58px;height:52px;border-radius:9px;padding:6px;display:grid;
  gap:4px;align-content:start;border:1px solid rgba(0,0,0,.12)}
.modo-mini i{display:block;height:5px;border-radius:3px}
.modo-mini .mm-topo{height:8px;margin:-6px -6px 2px;border-radius:8px 8px 0 0}
.modo-mini .mm-l2{width:80%}
.modo-mini .mm-l3{width:55%}
.modo-mini[data-mini="claro"]{background:#FFFFFF}
.modo-mini[data-mini="claro"] .mm-topo{background:#0B0F14}
.modo-mini[data-mini="claro"] i:not(.mm-topo){background:#C9CED9}
.modo-mini[data-mini="claro"] .mm-l1{background:#2563EB}
.modo-mini[data-mini="escuro"]{background:#151A22;border-color:rgba(255,255,255,.14)}
.modo-mini[data-mini="escuro"] .mm-topo{background:#070A0E}
.modo-mini[data-mini="escuro"] i:not(.mm-topo){background:#3A4352}
.modo-mini[data-mini="escuro"] .mm-l1{background:#3B82F6}
.modo-mini[data-mini="leitura"]{background:#FBF6EC;gap:6px}
.modo-mini[data-mini="leitura"] .mm-topo{background:#2B241B}
.modo-mini[data-mini="leitura"] i:not(.mm-topo){background:#C9B898;height:6px}
.modo-mini[data-mini="leitura"] .mm-l1{background:#1D4ED8}