/* === Respira LME · look & feel “Apple-like” === */
/* Paleta LME */
:root{
  --mint:#0a6a56;        /* primario */
  --sky:#2f6ee6;         /* acento frío */
  --vio:#6f64e7;         /* acento cálido */
  --ink:#1f2a33;         /* texto principal */
  --sub:#5b6871;         /* texto secundario */
  --card:#ffffff;        /* superficie */
  --line:#e7eef5;        /* separadores */
  --bg0:#f7fbff;         /* fondo base */
  --bgG1:#ecf7ff;        /* gradiente fondo */
  --bgG2:#f9f2ff;
  --shadow:0 10px 30px rgba(16,24,40,.05), 0 2px 8px rgba(16,24,40,.06);
  --radius:16px;
}

/* Tipografía y reset suave */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background:
    radial-gradient(1200px 500px at 20% -10%, var(--bgG1), transparent 60%),
    radial-gradient(1200px 500px at 80% -10%, var(--bgG2), transparent 60%),
    var(--bg0);
}

/* Appbar */
.appbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 18px;
  background:rgba(255,255,255,.74);
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(1.2) blur(10px);
}
.appbar .brand{
  display:flex; align-items:center; gap:10px;
  font-weight:700; text-decoration:none; color:var(--mint);
  letter-spacing:.2px;
}
.appbar nav a{
  display:inline-block; padding:8px 12px; margin-left:6px;
  border-radius:10px; color:#344054; text-decoration:none;
  transition:background .2s ease;
}
.appbar nav a:hover{ background:#f3f7fb; }

/* Contenedor principal */
.container{ max-width:1040px; margin:20px auto 40px; padding:0 18px; }

/* Cards */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  margin-bottom:16px;
  box-shadow:var(--shadow);
}
.card.compact{ padding:12px; }

/* Títulos y textos */
h1,h2{ margin:0 0 8px; letter-spacing:.2px; }
h1{ font-size:1.45rem; display:flex; align-items:center; gap:10px; }
.intro p{ margin:8px 0 0; color:var(--sub); }

/* Parrilla de controles */
.row{ display:flex; flex-wrap:wrap; gap:12px; align-items:end; }
label{ display:flex; flex-direction:column; gap:6px; font-size:.95rem; color:#3b4953; }

input,select{
  height:40px; padding:8px 12px;
  border:1px solid #cfe0ee; border-radius:10px;
  background:#fff; color:var(--ink);
  outline:none; transition:border .15s ease, box-shadow .15s ease;
}
input:focus,select:focus{ border-color:#98d9c8; box-shadow:0 0 0 4px rgba(152,217,200,.25); }

.chk{ flex-direction:row; align-items:center; gap:8px; color:#3b4953; }

/* Pills (selector de figura) */
.pills{ display:flex; flex-wrap:wrap; gap:8px; }
.pill{
  padding:7px 12px; border-radius:999px;
  border:1px solid #d8e5f1; background:#fff; color:#344054;
  cursor:pointer; transition: all .18s ease;
}
.pill:hover{ transform:translateY(-1px); box-shadow:0 4px 10px rgba(16,24,40,.06); }
.pill.active{ background:#e9f7f2; color:var(--mint); border-color:#9ed8c8; }

/* Botones */
.btn, .btn2{
  height:40px; padding:8px 14px; border-radius:12px; cursor:pointer; font-weight:700;
  border:1px solid transparent; transition:transform .12s ease, box-shadow .12s ease, background .2s ease;
}
.btn{ background:#e8f7f2; color:var(--mint); border-color:#bfe9da; }
.btn:hover{ transform:translateY(-1px); box-shadow:0 6px 14px rgba(10,106,86,.12); }
.btn2{ background:#eff0ff; color:var(--vio); border-color:#dcd8ff; }
.btn2:hover{ transform:translateY(-1px); box-shadow:0 6px 14px rgba(111,100,231,.12); }

/* Escenario (SVG responsive, gran lienzo) */
.stage{ position:relative; width:100%; aspect-ratio: 7 / 4; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.stage.small{ aspect-ratio: 1 / 1; }
#rgSVG, #playSVG{
  width:100%; height:100%; display:block;
  /* El JS ajusta viewBox; esto asegura nitidez y nada se recorta */
}

/* Info */
.bold{ font-weight:700; }
.instr{ font-size:1.18rem; color:var(--mint); margin:6px 0; }
.seq{ background:#f7fbff; border:1px dashed #d7e9f6; border-radius:12px; padding:10px; color:#3b4953; }

/* Mosaico (juego) */
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.tile{
  padding:16px; border-radius:14px; border:1px solid var(--line); background:#fff; cursor:pointer;
  box-shadow:var(--shadow); transition: transform .12s ease, box-shadow .12s ease, background .3s ease;
}
.tile:hover{ transform:translateY(-2px); box-shadow:0 12px 32px rgba(16,24,40,.08); background:#fafcff; }

/* Footer */
.foot{ padding:16px; text-align:center; color:#6b7380; }

/* Accesibilidad: focus visible */
:focus-visible{ outline:3px solid #9ed8c8; outline-offset:2px; border-radius:8px; }

/* Modo alto-contraste (pref) */
@media (prefers-contrast: more){
  .pill, .btn, .btn2, input, select { border-width:2px; }
  .seq{ border-style:solid; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .pill:hover, .btn:hover, .btn2:hover, .tile:hover, .glow { transform:none; box-shadow:none; animation: none; }
}

/* === Add-ons: stage polish, focus mode overlay, dark focus === */

/* GEOBREATH++ SVG polish & helpers */
/* Ensure strokes keep constant width on resize */
#rgSVG *, #playSVG * { vector-effect: non-scaling-stroke; }

/* Generic helpers that match new JS defs */
.aura{ filter: url(#rgAura); }
.stroke-grad{ stroke: url(#rgGrad); }
.dot{ transition: fill 180ms ease; }
.watermark{ fill:#000; opacity:.12; font-size:9px; }
.geo-glyph{ fill:#000; opacity:.22; }

/* Stage polish: subtle background + dashed border (keeps current layout) */
.stage{
  background: linear-gradient(180deg,#fbfdff 0%, #f7fbff 100%);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}

/* Focus mode: dim everything except the SVG stage (requires body.focus-mode) */
body.focus-mode .container::before{
  content:"";
  position: fixed; inset: 0;
  background:
    radial-gradient(700px 480px at 50% 55%, rgba(0,0,0,0) 32%, rgba(0,0,0,.68) 70%),
    rgba(0,0,0,.25);
  pointer-events: none; z-index: 10;
}
body.focus-mode .stage{ position: relative; z-index: 11; box-shadow: 0 18px 50px rgba(0,0,0,.28), 0 4px 12px rgba(0,0,0,.18); }
body.focus-mode .card{ box-shadow: none; }

/* Optional: slightly darker UI while in focus mode */
body.focus-mode .appbar, body.focus-mode .card, body.focus-mode .foot{
  background: rgba(255,255,255,.78);
}

/* High-contrast tweaks remain compatible */
@media (prefers-contrast: more){
  .stage{ border-width: 2px; }
}

/* Breathing point glow */
.glow {
  filter: url(#rgAura);
  animation: pulseGlow 2s infinite ease-in-out;
}
@keyframes pulseGlow {
  0% { opacity: 0.7; }
  50% { opacity: 1; }
  100% { opacity: 0.7; }
}

/* Trail line style */
.trail {
  stroke: var(--mint);
  stroke-width: 3;
  fill: none;
  filter: url(#rgAura);
  opacity: 0.85;
}

/* Accessibility controls */
.tts-btn, .focus-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: background .2s ease, box-shadow .2s ease;
}
.tts-btn:hover, .focus-btn:hover {
  background: #f7faff;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}

/* Dark-focus stronger variant */
body.focus-mode.dark .container::before{
  background: rgba(0,0,0,.85);
}

/* Instruction overlay inside focus mode */
body.focus-mode .instr {
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.8);
}

/* GEOBREATH++ pictogram overlay */
.pictos-layer{
  position:absolute;
  inset:0;
  display:none; /* toggled via JS */
  align-items:center;
  justify-content:center;
  pointer-events:none;
  z-index:5; /* above SVG */
  opacity:.30; /* subtle by default */
}

#rgPicto {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#rgPicto img {
  max-width: 60%;
  max-height: 60%;
  display: block;
}