/* palabras-es — светлая тема (F13). Телефон первым, крупный шрифт для школьника,
   системные шрифты, ни одного внешнего запроса. Диапазон 360–1400 px. */

:root {
  --fondo: #ffffff;
  --fondo-suave: #f6f7f9;
  --borde: #e2e6ec;
  --texto: #1c2430;
  --texto-suave: #55606e;
  --acento: #1a5fb4;
  --acento-suave: #eaf1fb;
  --radio: 10px;
  --ancho: 1100px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 18px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.envoltura {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 16px;
}

a { color: var(--acento); }
a:hover { text-decoration: none; }

.saltar {
  position: absolute;
  left: -9999px;
}
.saltar:focus {
  left: 8px;
  top: 8px;
  z-index: 10;
  background: #fff;
  padding: 8px 12px;
  border: 2px solid var(--acento);
  border-radius: var(--radio);
}

.visualmente-oculto {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── шапка ─────────────────────────────────────────────────────────────── */
.cabecera {
  border-bottom: 1px solid var(--borde);
  background: var(--fondo);
}
.cabecera__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.marca {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--texto);
  text-decoration: none;
}
.marca__texto { border-bottom: 3px solid var(--acento); }

/* Желаемая ширина поиска 260 → 220 px (18.09.2026). Причина замерена, а не на глаз:
   имя сайта меняется «Palabras» → «Palabrario», строка бренда растёт 91 → 110 px, и при
   260 px ряд шапки на окне 400 px перестаёт помещаться в одну строку (110 + 12 + 260 = 382
   против 368 доступных) — шапка вырастала 75 → 122 px и сдвигала первый экран вниз ровно на
   тех телефонах, которых больше всего (390–412 px). При 220 px ряд снова однострочный, поле
   поиска получает 246 px — набрать слово есть чем. Замер: tools/ojo_marca.py. */
.busq {
  display: flex;
  flex: 1 1 220px;
  min-width: 0;
  gap: 8px;
}
.busq input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo-suave);
  color: inherit;
}
.busq input:focus {
  outline: 2px solid var(--acento);
  background: #fff;
}
.busq button {
  font: inherit;
  font-weight: 600;
  padding: 10px 16px;
  border: 0;
  border-radius: var(--radio);
  background: var(--acento);
  color: #fff;
  cursor: pointer;
}

.menu { border-top: 1px solid var(--borde); background: var(--fondo-suave); }
.menu__fila {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.menu__enlace {
  flex: 0 0 auto;
  padding: 10px 12px;
  font-size: 16px;
  color: var(--texto-suave);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.menu__enlace:hover { color: var(--acento); }
.menu__enlace--activo {
  color: var(--acento);
  font-weight: 600;
  border-bottom-color: var(--acento);
}

/* ── крошки ────────────────────────────────────────────────────────────── */
.migas {
  font-size: 15px;
  color: var(--texto-suave);
  padding: 10px 0 0;
}
.migas a { text-decoration: none; }
.migas__sep { color: #9aa4b2; padding: 0 2px; }

/* ── содержимое ────────────────────────────────────────────────────────── */
.principal { padding: 8px 16px 48px; }

h1 {
  font-size: clamp(28px, 6vw, 40px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 16px 0 8px;
}
h2 { font-size: clamp(22px, 4vw, 28px); margin: 32px 0 8px; }
h3 { font-size: 20px; margin: 24px 0 8px; }

.entradilla {
  font-size: 19px;
  color: var(--texto-suave);
  max-width: 68ch;
  margin: 0 0 16px;
}

.texto { max-width: 68ch; }
.texto li { margin-bottom: 6px; }

/* примеры правил {{ej|…}} (F17): слово, слоги фишками, класс — строчкой внутри текста */
.ej {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 8px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo-suave);
  line-height: 1.5;
}
.ej-p { font-weight: 600; }
.ej-fichas { display: inline-flex; gap: 3px; flex-wrap: wrap; }
.ej-sil {
  padding: 0 5px;
  border-radius: 4px;
  background: var(--acento-suave);
  color: var(--acento);
  font-size: 0.94em;
}
.ej-clase {
  color: var(--texto-suave);
  font-size: 0.86em;
  text-transform: lowercase;
}

.en-obra {
  border: 1px dashed var(--borde);
  border-radius: var(--radio);
  background: var(--fondo-suave);
  padding: 16px;
  max-width: 68ch;
  color: var(--texto-suave);
}
.en-obra p { margin: 0 0 8px; }
.en-obra p:last-child { margin-bottom: 0; }

.tarjetas {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}
.tarjeta {
  min-width: 0;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 14px 16px;
  background: var(--fondo);
}
.tarjeta a {
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.tarjeta a:hover { text-decoration: underline; }
.tarjeta__nota {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  color: var(--texto-suave);
}
.tarjetas--inicio .tarjeta { background: var(--acento-suave); border-color: #d4e2f7; }

/* ── подвал ────────────────────────────────────────────────────────────── */
.pie {
  border-top: 1px solid var(--borde);
  background: var(--fondo-suave);
  padding: 24px 0 40px;
  font-size: 16px;
  color: var(--texto-suave);
}
.pie__enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0 0 12px;
}
.pie__nota { margin: 0; max-width: 80ch; }

@media (min-width: 720px) {
  .principal { padding-bottom: 64px; }
  .migas { padding-top: 14px; }
}

/* palabra */
.resumen{font-size:1.05rem;color:#3a3f45;margin:.2rem 0 1rem}
.resumen .dato{font-weight:600;color:#1a1d21}
.resumen .sep{color:#9aa3ad;margin:0 .15rem}
ol.silabas{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;padding:0;margin:0 0 1.2rem}
ol.silabas .silaba{background:#eef3fa;border:1px solid #d4e0ef;border-radius:.5rem;
  padding:.35rem .7rem;font-size:1.25rem;line-height:1.2}
ol.silabas .silaba.tonica{background:#1a5fb4;border-color:#1a5fb4;color:#fff;font-weight:700}
.aviso{background:#fff8e6;border:1px solid #f0dca8;border-radius:.5rem;padding:.6rem .8rem}
.variante{color:#4a5158}
p.mas{font-size:.95rem;margin-top:.3rem}
ul.grupos{margin:.4rem 0 0;padding-left:1.2rem}
.lista-palabras{line-height:1.9;word-break:break-word}
.glosa{background:#f6f8fa;border-left:3px solid #c7d3e0;padding:.5rem .8rem;margin:.4rem 0}
.credito{font-size:.85rem;color:#5b636b}
.vecinos{margin-top:2rem;border-top:1px solid #e6eaee;padding-top:.6rem}
.vecinos-titulo{font-size:1.05rem}

/* lista */
ul.fichas{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;padding:0;margin:.4rem 0 0}
ul.fichas li{background:#f3f6fa;border:1px solid #dde5ee;border-radius:.5rem;padding:.35rem .65rem}
ul.fichas .sil{color:#5b636b;font-size:.85rem;margin-left:.25rem}
ul.columnas{list-style:none;padding:0;margin:.6rem 0 0;column-width:9.5rem;column-gap:1.4rem;
  line-height:1.85;word-break:break-word}
ul.columnas li{break-inside:avoid}
.lista-ejemplos,.lista-regla,.lista-todas,.lista-cerca{margin-top:1.6rem}
nav.paginacion{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:1.4rem 0 .4rem}
nav.paginacion .pag{display:inline-block;min-width:2.1rem;text-align:center;
  border:1px solid #d4dce6;border-radius:.45rem;padding:.3rem .55rem;text-decoration:none}
nav.paginacion .pag.actual{background:#1a5fb4;border-color:#1a5fb4;color:#fff;font-weight:700}
nav.paginacion .hueco{color:#9aa3ad}
nav.filtro-letras{display:flex;flex-wrap:wrap;gap:.3rem;margin:.6rem 0 .2rem}
nav.filtro-letras .letra{border:1px solid #d4dce6;border-radius:.4rem;padding:.2rem .5rem;
  text-decoration:none;font-size:.95rem}
nav.filtro-letras .letra.actual{background:#1a5fb4;border-color:#1a5fb4;color:#fff;font-weight:700}
.filtro-aviso{color:#5b636b;font-size:.95rem;margin:.2rem 0 0}


/* herramientas */
/* Пять инструментов (F16): светлая тема, телефон первым, крупный ввод для школьника. */
.herr { display: flex; flex-direction: column; gap: .6rem; margin: 1.2rem 0 1.6rem;
        padding: 1rem; background: #f4f7fb; border: 1px solid #d8e2ef; border-radius: 12px; }
.herr label { font-weight: 600; font-size: .95rem; }
.herr input[type="text"], .herr input[type="number"], .herr input[type="search"] {
        width: 100%; box-sizing: border-box; padding: .7rem .8rem; font-size: 1.15rem;
        border: 1px solid #b9c7d9; border-radius: 8px; background: #fff; color: #10233a; }
.herr input:focus { outline: 3px solid #9dc1ef; outline-offset: 1px; }
.herr button { align-self: flex-start; padding: .7rem 1.4rem; font-size: 1.05rem; font-weight: 600;
        color: #fff; background: #1a5fb4; border: 0; border-radius: 8px; cursor: pointer; }
.herr button:hover { background: #164e95; }
.herr-opciones { border: 0; padding: 0; margin: 0; display: flex; gap: 1rem; flex-wrap: wrap; }
.herr-opciones legend { font-weight: 600; font-size: .95rem; padding: 0; }
.herr-opciones label { font-weight: 400; }
.herr-campos { display: grid; gap: .6rem 1rem; grid-template-columns: minmax(0, 1fr); }
.herr-campos p { margin: 0; display: flex; flex-direction: column; gap: .25rem; }
.herr-wordle summary { cursor: pointer; font-weight: 600; }
.herr-wordle p { margin: .5rem 0 0; display: flex; flex-direction: column; gap: .25rem; }
.herr-res { min-height: 1px; }
.res-palabras { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.res-palabra { padding: .8rem 1rem; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; }
.res-silabas { margin: 0; font-size: 1.5rem; font-weight: 600; line-height: 1.3; word-break: break-word; }
.res-silabas .silaba-tonica { color: #1a5fb4; }
.res-meta { margin: .3rem 0 0; color: #45566b; font-size: .95rem; }
.res-sugerencia { margin: .8rem 0 0; padding: .6rem .8rem; background: #fff8e6;
        border: 1px solid #f0d9a0; border-radius: 8px; }
.res-vacio { margin: .8rem 0 0; color: #45566b; }
.res-sub { margin: 1.4rem 0 .4rem; font-size: 1.15rem; }
.res-lista { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-wrap: wrap;
        gap: .4rem .5rem; }
.res-lista li { padding: .3rem .6rem; background: #fff; border: 1px solid #e2e8f0;
        border-radius: 999px; font-size: 1.02rem; }
.res-lista .res-n { color: #7a8a9c; font-size: .82rem; }
/* пометка «рифмуется только при сесео»: светлая, скромная, переносится на узком экране */
.res-nota { margin: .35rem 0 0; color: #6b5a2c; font-size: .92rem; }
.res-seseo { display: inline-block; padding: 0 .35rem; border: 1px solid #ecdcae;
        border-radius: 999px; background: #fdf7e6; color: #6b5a2c; font-size: .76rem;
        line-height: 1.5; white-space: nowrap; vertical-align: .05em; }
.herr-ayuda { margin-top: 2rem; }
.herr-ayuda ul { padding-left: 1.2rem; }
/* пояснения на главной и в хабе правил — та же скромная типографика, что у справки инструмента */
.inicio-explica, .reglas-hub { margin-top: 2rem; }
.inicio-explica ul, .reglas-hub ul { padding-left: 1.2rem; }
.inicio-explica li, .reglas-hub li, .herr-ayuda li { margin: .3rem 0; }
@media (min-width: 720px) {
  .herr-campos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── перенос длинных адресов ───────────────────────────────────────────────
   Находка гейта G6 (F21): на /fuentes/ при 360 px ссылка
   «github.com/hermitdave/FrequencyWords» не переносилась и растягивала страницу
   на 45 px. Правило общее: любой длинный адрес в тексте рвётся, а не торчит. */
main a, main code { overflow-wrap: anywhere; }