/* ==========================================================================
   VARIABLES DE COLOR Y TEMA
   ========================================================================== */
:root {
  /* Tema Claro (Por defecto) */
  --bg: #f1efe4;          /* Color de fondo principal (tono caqui claro) */
  --surface: #fbfaf3;     /* Color de las tarjetas y paneles (más claro) */
  --ink: #23301f;         /* Color del texto principal */
  --muted: #5d6853;       /* Color para textos secundarios o subtítulos */
  
  /* Puedes cambiar este color por el de tu grupo */
  --accent: #2f6b3a;      /* Verde scout - Color principal de botones y enlaces */
  --accent-ink: #fff;     /* Color del texto sobre botones de acento (blanco) */
  
  --line: #cfcdb8;        /* Color de las líneas y bordes */
  --warn: #b9741a;        /* Color de advertencia o foco (naranja/dorado) */
  
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Tema Oscuro (Se activa automáticamente si el celular/PC está en modo oscuro) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #171d15;
    --surface: #202a1d;
    --ink: #e8ecdc;
    --muted: #a3ad98;
    --accent: #7cc487;
    --accent-ink: #12200f;
    --line: #38452f;
    --warn: #e0a14d;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #171d15;
  --surface: #202a1d;
  --ink: #e8ecdc;
  --muted: #a3ad98;
  --accent: #7cc487;
  --accent-ink: #12200f;
  --line: #38452f;
  --warn: #e0a14d;
  color-scheme: dark;
}

/* ==========================================================================
   CONFIGURACIÓN GENERAL
   ========================================================================== */
*, *::before, *::after {
  box-sizing: inherit;
}

html {
  scroll-padding-top: env(safe-area-inset-top, 0px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.55 Georgia, "Times New Roman", serif;
}

main {
  max-width: 860px;
  margin: 0 auto;
  padding: 28px 18px 60px;
}

/* ==========================================================================
   TIPOGRAFÍA Y TEXTOS
   ========================================================================== */
h1 {
  font: 800 clamp(2rem, 6vw, 3.2rem)/1.05 "Trebuchet MS", Verdana, sans-serif;
  margin: .2em 0 .3em;
  letter-spacing: -.02em;
}

h2 {
  font: 700 1.35rem "Trebuchet MS", Verdana, sans-serif;
  margin: 1.6em 0 .5em;
}

p { margin: .4em 0; }

.lead {
  color: var(--muted);
  max-width: 60ch;
}

a { color: var(--accent); }

/* ==========================================================================
   NAVEGACIÓN Y PESTAÑAS
   ========================================================================== */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 14px;
}

.tabs button,
.tabs a {
  font: 600 .95rem "Trebuchet MS", Verdana, sans-serif;
  padding: 9px 14px;
  border: 2px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
}

.tabs button[aria-pressed="true"],
.tabs a[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

.tabs button.soon {
  border-style: dashed;
  color: var(--muted);
}

/* ==========================================================================
   FORMULARIOS Y BOTONES
   ========================================================================== */
button:focus-visible, 
textarea:focus-visible {
  outline: 3px solid var(--warn);
  outline-offset: 2px;
}

label {
  display: block;
  font: 600 .9rem "Trebuchet MS", Verdana, sans-serif;
  margin-bottom: 6px;
}

textarea {
  width: 100%;
  min-height: 96px;
  font: 1.05rem/1.4 Georgia, serif;
  padding: 10px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  resize: vertical;
}

input[type=text], 
select {
  font: 1rem Georgia, serif;
  padding: 9px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
}

.btn {
  font: 600 .9rem "Trebuchet MS", Verdana, sans-serif;
  padding: 8px 14px;
  border-radius: 8px;
  border: 2px solid var(--accent);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
}

.btn.fill {
  background: var(--accent);
  color: var(--accent-ink);
}

/* ==========================================================================
   PANELES Y TARJETAS
   ========================================================================== */
.panel {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 18px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}

.cards article {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 14px;
}

.cards h3 {
  margin: 0 0 4px;
  font: 700 1.05rem "Trebuchet MS", Verdana, sans-serif;
}

.cards h3 a { text-decoration: none; }

/* ==========================================================================
   RESULTADOS DEL TRADUCTOR
   ========================================================================== */
.out {
  min-height: 60px;
  margin-top: 14px;
  padding: 12px;
  border: 2px dashed var(--line);
  border-radius: 8px;
  font-size: 1.15rem;
  word-break: break-word;
  white-space: pre-wrap;
}

.out svg {
  width: 34px;
  height: 34px;
  vertical-align: middle;
  margin: 1px;
}

.out .sp {
  display: inline-block;
  width: 18px;
}

/* Tamaños de SVG para las claves gráficas (Morse, Gato, China, etc) */
.out svg.sm { width: 64px; height: 72px; }
.pal svg.sm { width: 52px; height: 58px; }
.keys svg.sm { width: 70px; height: 78px; }
.out svg.cn, .pal svg.cn { width: 46px; height: 46px; }
.keys svg.cn { width: 56px; height: 56px; }

/* ==========================================================================
   TECLADOS Y PALETAS (Para ingresar símbolos)
   ========================================================================== */
.keys {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 6px;
  margin-top: 12px;
}

.keys div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 4px;
  text-align: center;
  font: 600 .85rem "Trebuchet MS", Verdana, sans-serif;
}

.keys div b {
  display: block;
  font-size: 1.05rem;
  color: var(--accent);
}

.keys svg {
  width: 30px;
  height: 30px;
  display: block;
  margin: 2px auto;
}

.pal {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 6px;
  margin-top: 12px;
}

.pal button {
  border: 2px solid var(--line);
  background: var(--bg);
  border-radius: 8px;
  padding: 4px;
  cursor: pointer;
  color: var(--ink);
}

.pal button:hover {
  border-color: var(--accent);
}

.pal svg {
  width: 34px;
  height: 34px;
  display: block;
  margin: auto;
}

/* ==========================================================================
   UTILIDADES
   ========================================================================== */
.hint { font-size: .9rem; color: var(--muted); margin-top: 10px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.ad { margin: 26px 0; padding: 20px; text-align: center; border: 2px dashed var(--line); border-radius: 10px; color: var(--muted); font-size: .9rem; }
.soonbox { color: var(--muted); }
.crumbs { font-size: .9rem; color: var(--muted); }
.crumbs a { color: var(--accent); }
.seo { margin-top: 26px; }
.seo p { max-width: 68ch; }
.pista { border: 2px dashed var(--line); border-radius: 10px; padding: 12px; margin: 10px 0; break-inside: avoid; }
.sheet { margin-top: 18px; }
.sheet .keys { break-inside: avoid; }
footer { margin-top: 40px; color: var(--muted); font-size: .9rem; border-top: 2px solid var(--line); padding-top: 14px; }

/* ==========================================================================
   IMPRESIÓN (Optimizado para generar los juegos de pistas en papel)
   ========================================================================== */
@media print {
  :root:root:root {
    --bg: #fff;
    --surface: #fff;
    --ink: #000;
    --muted: #444;
    --accent: #000;
    --line: #999;
  }
  .noprint { display: none !important; }
  .sol { break-before: page; }
  body { background: #fff; }
}
/* Navegación principal y accesos destacados */
.topbar{background:var(--accent);color:var(--accent-ink);position:sticky;top:0;z-index:20}
.topbar-in{max-width:860px;margin:0 auto;padding:8px 18px;display:flex;align-items:center;gap:6px 16px;flex-wrap:wrap}
.topbar .brand{font:800 1.1rem "Trebuchet MS",Verdana,sans-serif;color:inherit;text-decoration:none;margin-right:auto}
.topbar nav{display:flex;gap:4px;flex-wrap:wrap}
.topbar nav a{font:600 .92rem "Trebuchet MS",Verdana,sans-serif;color:inherit;text-decoration:none;padding:7px 12px;border-radius:999px}
.topbar nav a:hover{text-decoration:underline}
.topbar nav a[aria-current="page"]{background:var(--accent-ink);color:var(--accent)}
.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:18px 0}
.card-feat{display:flex;flex-direction:column;gap:4px;padding:16px;background:var(--surface);border:2px solid var(--accent);border-radius:12px;color:var(--ink);text-decoration:none}
.card-feat:hover,.card-feat:focus-visible{background:var(--accent);color:var(--accent-ink)}
.card-feat .ico{font-size:1.8rem;line-height:1}
.card-feat b{font:700 1.05rem "Trebuchet MS",Verdana,sans-serif}
.card-feat span:last-child{font-size:.92rem;opacity:.85}
.next h2{margin:1.2em 0 0}
@media (max-width:520px){.topbar-in{padding:6px 12px}.topbar nav{width:100%;justify-content:space-between}.topbar nav a{padding:7px 9px;font-size:.88rem}}

/* Botón de tema, pestañas deslizables y vista compacta en celular */
.tabs{position:relative}
.topbar .theme{order:3;background:transparent;border:2px solid currentColor;color:inherit;border-radius:999px;width:38px;height:34px;font-size:1rem;line-height:1;cursor:pointer;padding:0}
.topbar nav{order:2}
.cards article{position:relative}
.cards h3 a::after{content:"";position:absolute;inset:0}
@media (max-width:600px){
  body{font-size:16px}
  main{padding:16px 14px 48px}
  h1{font-size:1.65rem}
  h2{font-size:1.2rem}
  .lead{font-size:.98rem}
  .panel{padding:14px}
  .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:14px -14px 12px;padding:0 14px 4px}
  .tabs::-webkit-scrollbar{display:none}
  .tabs a,.tabs button{white-space:nowrap;flex:none}
  .cards{grid-template-columns:1fr 1fr;gap:10px}
  .cards article{padding:0;display:flex;align-items:center;justify-content:center;min-height:62px;text-align:center}
  .cards article p{display:none}
  .cards article h3{margin:0;padding:10px;font-size:1rem}
  .feat{grid-template-columns:1fr;gap:10px;margin:14px 0}
  .feat .card-feat{flex-direction:row;align-items:center;gap:12px;padding:12px 14px}
  .feat .card-feat span:last-child{display:none}
  .feat .card-feat .ico{font-size:1.5rem}
  .next .feat .card-feat span:last-child{display:none}
}
@media (max-width:520px){.topbar .theme{order:2}.topbar nav{order:3}}

/* Barra superior más suave en modo oscuro */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .topbar{background:var(--surface);color:var(--accent);border-bottom:2px solid var(--line)}:root:not([data-theme="light"]) .topbar nav a[aria-current="page"]{background:var(--accent);color:var(--accent-ink)}}
:root[data-theme="dark"] .topbar{background:var(--surface);color:var(--accent);border-bottom:2px solid var(--line)}
:root[data-theme="dark"] .topbar nav a[aria-current="page"]{background:var(--accent);color:var(--accent-ink)}

/* ===== Dirección A: carta topográfica ===== */
:root{--bg:#e8ece3;--surface:#f4f6ef;--ink:#1d2b22;--muted:#4a5a4f;--accent:#1d2b22;--accent-ink:#f4f6ef;--line:#9aa890;--rule:#1d2b22;--hot:#b53a14;--warn:#b53a14}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#121a14;--surface:#1b261e;--ink:#e8ece3;--muted:#a3b0a5;--accent:#e8ece3;--accent-ink:#121a14;--line:#3d4d42;--rule:#e8ece3;--hot:#ff8a5c;--warn:#ff8a5c}}
:root[data-theme="dark"]{--bg:#121a14;--surface:#1b261e;--ink:#e8ece3;--muted:#a3b0a5;--accent:#e8ece3;--accent-ink:#121a14;--line:#3d4d42;--rule:#e8ece3;--hot:#ff8a5c;--warn:#ff8a5c}
body{font-family:'Barlow',system-ui,sans-serif;font-size:17px;overflow-x:hidden}
h1,h2,h3{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:0}
h1{font-size:clamp(2.6rem,8vw,4.6rem);line-height:.94}
h2{font-size:2rem;line-height:1.05}
.lead,.seo p{color:var(--muted)}
.keys div,label,.btn,.tabs a,.tabs button,select,.hint,.crumbs,footer{font-family:'Barlow',system-ui,sans-serif}
textarea,input[type=text],.out{font-family:'IBM Plex Mono',ui-monospace,monospace}
.panel,.cards article,.btn,textarea,input[type=text],select,.out,.tabs a,.tabs button,.pal button,.keys div,.pista,.ad{border-radius:2px}
.panel{border:1.5px solid var(--rule)}
.btn{border:1.5px solid var(--rule);color:var(--ink);padding:11px 20px;font-size:1rem}
.btn.fill{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.tabs a,.tabs button{border:1.5px solid var(--line)}
.tabs a[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.keys div b,.hint.ok{color:var(--hot)}
.pal button:hover{border-color:var(--rule)}
footer{border-top:1.5px solid var(--rule)}
a{color:inherit}.seo a,.crumbs a,footer a{color:var(--hot)}
.topbar{border-bottom:1.5px solid var(--rule)}
:root:root:root:root .topbar{background:var(--bg);color:var(--ink);border-bottom:1.5px solid var(--rule)}
:root:root:root:root .topbar nav a[aria-current="page"]{background:var(--accent);color:var(--accent-ink)}
.topbar .brand{font-family:'Barlow Condensed',sans-serif;font-size:1.8rem;letter-spacing:.04em;text-transform:uppercase}
.topbar nav a{border-radius:0;font-family:'Barlow',sans-serif}
.topbar .theme{border:1.5px solid var(--rule);border-radius:2px;color:var(--ink)}
/* inicio */
.hero{position:relative;display:flex;flex-wrap:wrap;gap:40px;align-items:center;padding:48px 0 40px;overflow:hidden}
.hero>*{position:relative;z-index:1}
.hero .contour{position:absolute;z-index:0;right:-160px;top:-60px;width:880px;height:590px;color:var(--line);opacity:.9;pointer-events:none}
.hero-t{flex:1 1 440px;min-width:0}
.kicker{margin:0 0 14px;font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.hero .lead{font-size:1.15rem;max-width:540px;margin-top:20px}
.hero .row{margin-top:26px;gap:12px}
.slip{flex:0 1 320px;background:var(--surface);border:1.5px solid var(--rule);padding:20px 22px;transform:rotate(1.5deg);box-shadow:6px 6px 0 var(--rule);margin-right:12px}
.slip p{margin:0}.slip .k{font:500 12px 'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.slip .k2{margin-top:14px;font:400 13px 'IBM Plex Mono',monospace;color:var(--muted)}
.slip .big{font:500 32px 'IBM Plex Mono',monospace;letter-spacing:.06em}.slip .big.hot{color:var(--hot)}
.slip hr{border:0;border-top:1.5px solid var(--rule);margin:14px 0 0}
.tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px;margin:8px 0 44px}
.tool{display:block;border-top:4px solid var(--rule);padding:14px 2px 6px;text-decoration:none;color:var(--ink)}
.tool .k{font:500 12px 'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--hot)}
.tool h3{margin:6px 0;font-size:1.9rem;line-height:1}
.tool p{margin:0;color:var(--muted)}
.tool:hover h3{color:var(--hot)}
.sec-h{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;justify-content:space-between;border-bottom:1.5px solid var(--rule);padding-bottom:10px;margin:8px 0 22px}
.sec-h h2{margin:0;font-size:2.6rem}.sec-h span{font:400 13px 'IBM Plex Mono',monospace;color:var(--muted)}
.cards{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.cards article{background:var(--surface);border:1.5px solid var(--rule);padding:18px 18px 14px;transition:transform .15s,box-shadow .15s}
.cards article:hover{transform:translateY(-3px);box-shadow:4px 4px 0 var(--rule)}
.cards h3{font-size:1.75rem;margin:0 0 6px;line-height:1}
.cards h3 a{text-decoration:none;color:var(--ink)}
.cards article p{margin:0 0 12px;color:var(--muted);font-size:1rem;line-height:1.4}
.cards article p.ex{margin:0;padding-top:12px;border-top:1.5px dashed var(--line);font:400 14px 'IBM Plex Mono',monospace;color:var(--ink)}
@media (max-width:600px){
  .hero{padding:24px 0 16px}.hero .contour{right:-300px;top:-40px;opacity:.6}.slip{display:none}
  .hero .lead{font-size:1rem}.hero .row .btn{flex:1 1 100%;text-align:center}
  .tools{grid-template-columns:1fr;gap:10px;margin-bottom:28px}
  .tool{border-top-width:3px;padding:10px 2px 4px}.tool .k,.tool p{display:none}.tool h3{font-size:1.5rem;margin:0}
  .sec-h h2{font-size:2rem}.sec-h span{display:none}
  .cards article p.ex{display:none}
  .cards article h3{padding:10px}.cards article h3 a{font-size:inherit}
}
/* braille */
.br{font-family:'DejaVu Sans','Segoe UI Symbol','Noto Sans Symbols 2',sans-serif;font-size:1.5em;line-height:1}
.pal button .br{font-size:1.9rem;display:block}.pal button small{display:block;font:500 11px 'IBM Plex Mono',monospace;color:var(--muted)}
#out,#padout{word-break:break-word}
/* señas */
.ls{display:inline-block;height:84px;width:auto;margin:2px;vertical-align:middle;border-radius:2px;background:#f0efed}
.pal img.ls{height:64px}.keys img.ls{display:block;height:96px;margin:6px auto 0}
@media (max-width:600px){.out img.ls{height:70px}.pal img.ls{height:56px}}

/* Los espacios publicitarios se ocultan hasta activar anuncios: quita esta línea cuando AdSense esté aprobado */
.ad{display:none!important}

/* impresión del generador: que los títulos no queden solos al final de una página */
@media print{.sheet h2,.sheet h3{break-after:avoid;page-break-after:avoid}.sheet .keys{break-inside:avoid;page-break-inside:avoid}.sheet .pista{break-inside:avoid;page-break-inside:avoid}}

/* Morse: puntos y rayas dibujados, para que no dependan de la tipografía */
.out{font-variant-ligatures:none;font-feature-settings:"liga" 0,"calt" 0}
.keys b.mo{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;min-height:14px;margin-top:4px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.keys b.mo i{flex:none;display:inline-block;background:currentColor;height:4px;margin:0 1.5px;border-radius:3px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.keys b.mo i.dt{width:4px;height:4px;border-radius:50%}
.keys b.mo i.ds{width:10px}