/* ============================================================
   PROTOCOLO INTI FOCUS — Sistema de diseño v0.2
   Paleta y tono derivados del BrandBook Inti Focus.
   ============================================================ */

:root {
  /* Primarios */
  --negro:        #080604;
  --carbon:       #0f0b08;
  --dorado:       #CEAA6B;
  --crema:        #F4F1E3;

  /* Secundarios (BrandBook) */
  --crema-claro:  #E6E1CF;
  --bronce:       #84643D;
  --tabaco:       #5E4326;
  --tierra:       #44301D;

  /* Derivados */
  --crema-55:     rgba(244, 241, 227, 0.55);
  --crema-30:     rgba(244, 241, 227, 0.30);
  --dorado-borde: rgba(206, 170, 107, 0.22);
  --dorado-suave: rgba(206, 170, 107, 0.10);

  --f-display: "Space Grotesk", "Segoe UI", sans-serif;
  --f-body:    "Inter", "Segoe UI", sans-serif;

  --radius: 16px;
  --tabbar-h: 64px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--f-body);
  color: var(--crema);
  background:
    radial-gradient(120% 70% at 50% -12%, #2a1a09 0%, #120c06 46%, var(--negro) 100%)
    fixed var(--negro);
  min-height: 100dvh;
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 16px);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Encabezado ---------- */
.app-header {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  padding: calc(14px + env(safe-area-inset-top)) 20px 10px;
}
.header-chakana { width: 24px; height: 24px; object-fit: contain; }
.wordmark {
  font-family: var(--f-display);
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--crema-55);
}
.wordmark strong { color: var(--dorado); font-weight: 500; }

/* ---------- Layout ---------- */
main {
  max-width: 480px;
  margin: 0 auto;
  padding: 8px 20px 0;
}
.tab[hidden] { display: none; }

.greeting {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(1.7rem, 6vw, 2.1rem);
  letter-spacing: 0.01em;
  margin-top: 18px;
}
.date-line {
  color: var(--dorado);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 6px 0 22px;
}
.screen-title {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1.5rem;
  margin-top: 18px;
}
.screen-sub {
  color: var(--crema-55);
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 8px 0 18px;
  max-width: 38ch;
}

/* ---------- Tarjetas ---------- */
.card {
  background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(0,0,0,0)) var(--carbon);
  border: 1px solid var(--dorado-borde);
  border-radius: var(--radius);
  padding: 22px 20px;
  margin-bottom: 18px;
}
.card-title {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--dorado);
}
.card-sub {
  color: var(--crema-55);
  font-size: 0.82rem;
  margin-top: 6px;
}

/* ---------- Ritual: chakana oficial ---------- */
.card-ritual { text-align: center; }

.chakana-btn {
  display: block;
  width: 172px;
  height: 172px;
  margin: 20px auto 14px;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.18s ease, filter 0.6s ease;
}
.chakana-btn:active { transform: scale(0.96); }
.chakana-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.55;
  transition: opacity 0.6s ease;
}

@keyframes respira {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 0.95; }
}
.chakana-btn:not(.is-done) img { animation: respira 4.5s ease-in-out infinite; }

.chakana-btn.is-done { filter: drop-shadow(0 0 28px rgba(206, 170, 107, 0.45)); }
.chakana-btn.is-done img { opacity: 1; animation: none; }

.ritual-hint {
  color: var(--crema-55);
  font-size: 0.85rem;
}
.ritual-done {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--crema);
}
.ritual-done .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--dorado);
  box-shadow: 0 0 8px var(--dorado);
}
.link-btn {
  background: none;
  border: none;
  color: var(--crema-30);
  font-size: 0.78rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 4px;
}
.link-btn:hover { color: var(--crema-55); }

/* ---------- Estado: Sintonía ---------- */
.estado-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.cafe-btn { text-decoration: none; color: var(--crema-30); letter-spacing: 0.04em; }
.cafe-btn:hover { color: var(--dorado); }

.sin-bar {
  position: relative;
  height: 10px;
  border-radius: 6px;
  background: rgba(244, 241, 227, 0.06);
  margin: 18px 0 12px;
  overflow: hidden;
}
.sin-zona {
  position: absolute;
  left: 16.7%;
  width: 50%;
  top: 0; bottom: 0;
  background: var(--dorado-suave);
}
.sin-fill {
  position: relative;
  height: 100%;
  width: 0%;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(206, 170, 107, 0.45), var(--dorado));
  box-shadow: 0 0 12px rgba(206, 170, 107, 0.35);
  transition: width 0.8s ease;
}
@keyframes techo {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
.sin-fill.is-techo { animation: techo 1.8s ease-in-out infinite; }

.sin-state {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.85rem;
}
#sinEstado {
  font-family: var(--f-display);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--dorado);
}
.sin-detalle { color: var(--crema-55); font-size: 0.8rem; }

.cafe-line {
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--crema-30);
}
.noche-note {
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--bronce);
}

.estado-divider {
  border: none;
  border-top: 1px solid rgba(206, 170, 107, 0.10);
  margin: 18px 0;
}

/* ---------- Estado: Resistencia ---------- */
.resistencia {
  display: flex;
  align-items: center;
  gap: 16px;
}
.res-ring { width: 64px; height: 64px; flex: none; }
.res-track {
  fill: none;
  stroke: rgba(244, 241, 227, 0.08);
  stroke-width: 3;
}
.res-arc {
  fill: none;
  stroke: var(--dorado);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 169.65;
  stroke-dashoffset: 169.65;
  transition: stroke-dashoffset 0.8s ease;
}
.res-texto {
  color: var(--crema-55);
  font-size: 0.8rem;
  line-height: 1.5;
  margin-top: 6px;
}

/* ---------- Cumbres ---------- */
.cumbres { list-style: none; margin-top: 16px; }
.cumbre-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
}
.cumbre-row + .cumbre-row { border-top: 1px solid rgba(206, 170, 107, 0.10); }

.check {
  flex: none;
  width: 24px; height: 24px;
  border: 1px solid var(--dorado-borde);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: background 0.25s ease, border-color 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}
.check::after {
  content: "";
  position: absolute;
  inset: 0;
  background: center / 60% no-repeat
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 12.5 L10 18 L20 6" fill="none" stroke="%23080604" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  opacity: 0;
  transition: opacity 0.25s ease;
}
.check[aria-pressed="true"] {
  background: var(--dorado);
  border-color: var(--dorado);
}
.check[aria-pressed="true"]::after { opacity: 1; }
.check:disabled { opacity: 0.35; cursor: default; }

.cumbre-input {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  color: var(--crema);
  font-family: var(--f-body);
  font-size: 0.95rem;
  padding: 6px 2px;
  transition: border-color 0.25s ease, opacity 0.25s ease;
}
.cumbre-input::placeholder { color: var(--crema-30); }
.cumbre-input:focus {
  outline: none;
  border-bottom-color: var(--dorado);
}
.cumbre-row.is-done .cumbre-input { opacity: 0.45; }

.progress-line {
  margin-top: 14px;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--dorado);
}

/* ---------- Mi Ruta: semana ---------- */
.semana-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 16px;
  text-align: center;
}
.sem-stat { display: flex; flex-direction: column; gap: 4px; }
.sem-num {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--dorado);
  font-variant-numeric: tabular-nums;
}
.sem-label {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--crema-55);
}

/* ---------- Mi Ruta: calendario ---------- */
.ruta-weekdays,
.ruta-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.ruta-weekdays {
  margin-bottom: 12px;
  text-align: center;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--crema-30);
}
.ruta-cell {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 10px;
  font-size: 0.72rem;
  color: var(--crema-55);
}
.ruta-cell.is-empty { visibility: hidden; }
.ruta-cell.is-future { color: var(--crema-30); }
.ruta-cell.is-today { outline: 1px solid var(--dorado-borde); outline-offset: -1px; }

.ruta-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(244, 241, 227, 0.08);
}
.ruta-cell.has-dose .ruta-dot {
  background: var(--dorado);
  box-shadow: 0 0 6px rgba(206, 170, 107, 0.5);
}
.ruta-cell.has-full .ruta-dot {
  outline: 1.5px solid var(--dorado);
  outline-offset: 2.5px;
}

/* ---------- Mi Frasco ---------- */
.card-frasco { text-align: center; padding-top: 28px; }

.bottle { width: 110px; margin: 0 auto 18px; display: block; }
.bottle-cap  { fill: #15100a; stroke: var(--dorado-borde); stroke-width: 1; }
.bottle-body { fill: #0b0805; stroke: var(--dorado-borde); stroke-width: 1; }
.bottle-fill { fill: var(--dorado); opacity: 0.16; transition: y 0.8s ease, height 0.8s ease; }

.frasco-big {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1.45rem;
  font-variant-numeric: tabular-nums;
}
.frasco-sub {
  color: var(--crema-55);
  font-size: 0.85rem;
  margin-top: 6px;
}

.btn-gold {
  display: inline-block;
  margin-top: 20px;
  padding: 13px 22px;
  background: var(--dorado);
  color: var(--negro);
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 12px;
}
.btn-gold:active { transform: scale(0.98); }

.btn-quiet {
  display: block;
  margin: 22px auto 0;
  background: none;
  border: 1px solid var(--dorado-borde);
  color: var(--crema-55);
  font-family: var(--f-body);
  font-size: 0.8rem;
  padding: 10px 18px;
  border-radius: 12px;
  cursor: pointer;
}
.btn-quiet:hover { color: var(--crema); border-color: var(--dorado); }

.frasco-historial {
  margin-top: 14px;
  font-size: 0.78rem;
  color: var(--crema-30);
}

.version {
  text-align: center;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--crema-30);
  margin: 6px 0 14px;
}

/* ---------- Barra de pestañas ---------- */
.tabbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  justify-content: center;
  gap: 8px;
  background: rgba(8, 6, 4, 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--dorado-borde);
}
.tabbar-btn {
  flex: 1;
  max-width: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--crema-30);
  cursor: pointer;
  font-family: var(--f-body);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.25s ease;
}
.tabbar-btn svg { width: 22px; height: 22px; }
.tabbar-btn.is-active { color: var(--dorado); }

/* ---------- Accesibilidad ---------- */
:focus-visible {
  outline: 2px solid var(--dorado);
  outline-offset: 3px;
  border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================
   MODO APU (v0.3)
   ============================================================ */

/* La semana ahora tiene 4 estadísticas: 2 × 2 */
.semana-grid {
  grid-template-columns: repeat(2, 1fr);
  row-gap: 18px;
}

/* ---------- Selector ---------- */
.apu-guia {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 14px;
  font-size: 0.85rem;
  color: var(--crema-55);
  cursor: pointer;
  width: fit-content;
}
.apu-guia input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.apu-switch {
  position: relative;
  width: 38px;
  height: 21px;
  flex: none;
  border-radius: 999px;
  background: rgba(244, 241, 227, 0.10);
  border: 1px solid var(--dorado-borde);
  transition: background 0.25s ease;
}
.apu-switch::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--crema-55);
  transition: transform 0.25s ease, background 0.25s ease;
}
.apu-guia input:checked + .apu-switch {
  background: var(--dorado-suave);
  border-color: var(--dorado);
}
.apu-guia input:checked + .apu-switch::after {
  transform: translateX(17px);
  background: var(--dorado);
}
.apu-guia input:focus-visible + .apu-switch {
  outline: 2px solid var(--dorado);
  outline-offset: 3px;
}

.apu-total {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--dorado);
  margin-bottom: 14px;
}

.apu-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}
.apu-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
  padding: 16px 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(0,0,0,0)) var(--carbon);
  border: 1px solid var(--dorado-borde);
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--f-body);
  transition: border-color 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}
.apu-card:not(.apu-lock):hover { border-color: var(--dorado); }
.apu-card-nombre {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1rem;
  color: var(--crema);
}
.apu-card-meta {
  font-size: 0.75rem;
  color: var(--crema-55);
}
.apu-lock { cursor: default; }
.apu-lock .apu-card-nombre { color: var(--crema-55); }
.apu-dim { opacity: 0.45; }

/* ---------- Juego ---------- */
.apu-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 18px 0 10px;
}
.apu-esc-nombre {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dorado);
}
.apu-ciclos {
  font-size: 0.78rem;
  color: var(--crema-55);
  font-variant-numeric: tabular-nums;
  min-width: 62px;
  text-align: right;
}

.apu-prog {
  height: 3px;
  border-radius: 2px;
  background: rgba(244, 241, 227, 0.06);
  overflow: hidden;
  margin-bottom: 12px;
}
.apu-prog i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--dorado);
  transition: width 0.3s linear;
}

.apu-escena {
  position: relative;
  height: 54vh;
  min-height: 330px;
  border: 1px solid var(--dorado-borde);
  border-radius: var(--radius);
  overflow: hidden;
  background: radial-gradient(130% 90% at 50% -20%, #201306 0%, #0b0703 55%, var(--negro) 100%);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
}
.apu-escena svg {
  width: 100%;
  height: 100%;
  display: block;
}

.apu-linea {
  fill: none;
  stroke: var(--dorado);
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.op1 { opacity: 0.22; }
.op2 { opacity: 0.45; }
.op3 { opacity: 0.8; }

/* Sprites */
.sp-llama { fill: var(--dorado); opacity: 0.5; }
.sp-cond path {
  fill: none;
  stroke: var(--dorado);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.6;
}
.sp-cond-cuerpo { fill: var(--dorado); opacity: 0.6; }
.sp-neb { fill: var(--dorado); opacity: 0.09; }
.sp-nube { fill: var(--dorado); opacity: 0.07; }
.sp-band path {
  fill: none;
  stroke: var(--dorado);
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0.55;
}
.sp-viento path {
  fill: none;
  stroke: var(--dorado);
  stroke-width: 1.4;
  stroke-linecap: round;
  opacity: 0.3;
}

.apu-mov { animation-timing-function: linear; animation-fill-mode: forwards; }
.apu-lr { animation-name: apuLR; }
.apu-rl { animation-name: apuRL; }
@keyframes apuLR {
  from { transform: translateX(-100px); }
  to   { transform: translateX(500px); }
}
@keyframes apuRL {
  from { transform: translateX(500px); }
  to   { transform: translateX(-100px); }
}

/* Guía de ritmo */
.apu-halo {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  border: 1.5px solid rgba(206, 170, 107, 0.5);
  border-radius: 50%;
  pointer-events: none;
  box-shadow: inset 0 0 30px rgba(206, 170, 107, 0.12);
  animation: apuRespira 8s ease-in-out infinite;
}
@keyframes apuRespira {
  0%   { transform: scale(0.55); }
  44%  { transform: scale(1.15); }
  100% { transform: scale(0.55); }
}

/* Instrucciones */
.apu-inst {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(8, 6, 4, 0.84);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: 2;
}
.apu-inst-card {
  text-align: center;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.95rem;
  line-height: 1.5;
}
.apu-inst-card strong { color: var(--dorado); font-weight: 600; }
.apu-inst-min { font-size: 0.78rem; color: var(--crema-55); }
.apu-inst-card .btn-gold { margin-top: 8px; border: none; cursor: pointer; }

/* Puntos del ciclo */
.apu-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 18px 0 6px;
}
.apu-dot {
  width: 13px;
  height: 13px;
  border: 1.5px solid var(--dorado-borde);
  transform: rotate(45deg);
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.apu-dot.quinta {
  outline: 1.5px solid var(--dorado-borde);
  outline-offset: 3px;
}
.apu-dot.on {
  background: var(--dorado);
  border-color: var(--dorado);
  box-shadow: 0 0 8px rgba(206, 170, 107, 0.5);
}
.apu-dot.quinta.on { outline-color: var(--dorado); }

@keyframes apuErr {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.22; }
}
.apu-dots.err { animation: apuErr 0.5s ease; }

@keyframes apuWin {
  0%   { filter: drop-shadow(0 0 0 rgba(206, 170, 107, 0)); }
  50%  { filter: drop-shadow(0 0 14px rgba(206, 170, 107, 0.7)); }
  100% { filter: drop-shadow(0 0 0 rgba(206, 170, 107, 0)); }
}
.apu-dots.win { animation: apuWin 0.65s ease; }

/* Resumen */
.apu-res-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 0;
  font-size: 0.9rem;
  color: var(--crema-55);
}
.apu-res-row + .apu-res-row { border-top: 1px solid rgba(206, 170, 107, 0.10); }
.apu-res-row:first-of-type { margin-top: 10px; }
.apu-res-row strong {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--dorado);
  font-variant-numeric: tabular-nums;
}
.apu-nuevo {
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--dorado);
}
.apu-res-botones {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.apu-res-botones .btn-gold { border: none; cursor: pointer; }

/* ============================================================
   v0.4 — Sintonía de consumo, Reflexión, dificultad Apu, Rueda
   ============================================================ */

/* La zona de la barra ahora marca la franja de precaución final */
.sin-zona { left: auto; right: 0; width: 15%; }

/* Reflexión del día */
.nota-dia {
  width: 100%;
  margin-top: 14px;
  background: transparent;
  border: 1px solid var(--dorado-borde);
  border-radius: 10px;
  color: var(--crema);
  font-family: var(--f-body);
  font-size: 0.9rem;
  line-height: 1.5;
  padding: 12px;
  resize: vertical;
  min-height: 76px;
}
.nota-dia::placeholder { color: var(--crema-30); }
.nota-dia:focus { outline: none; border-color: var(--dorado); }
.nota-guardada {
  margin-top: 8px;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dorado);
}

/* Apu: porqué y dificultad */
.apu-porque {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--crema-55);
  border-left: 2px solid var(--dorado-borde);
  padding-left: 12px;
  margin: 0 0 16px;
  max-width: 42ch;
}
.apu-dif { display: inline-flex; gap: 4px; margin: 2px 0; }
.apu-dif i {
  width: 7px; height: 7px;
  border: 1px solid var(--dorado-borde);
  transform: rotate(45deg);
}
.apu-dif i.on { background: var(--dorado); border-color: var(--dorado); }

/* Rueda de la vida */
.rueda-guia {
  margin: 0 0 16px;
  border: 1px solid var(--dorado-borde);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 0.85rem;
  color: var(--crema-55);
}
.rueda-guia summary {
  cursor: pointer;
  color: var(--dorado);
  font-family: var(--f-display);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.rueda-guia ol {
  margin: 12px 0 4px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  line-height: 1.5;
}
.card-rueda { padding: 16px 8px; text-align: center; }
#ruedaSvg { width: 100%; max-width: 340px; margin: 0 auto; display: block; }
.rueda-anillo { fill: none; stroke: rgba(244, 241, 227, 0.07); }
.rueda-radio { stroke: rgba(244, 241, 227, 0.08); }
.rueda-tag { fill: var(--crema-55); font-size: 10px; font-family: var(--f-body); }
.rueda-valor {
  fill: rgba(206, 170, 107, 0.16);
  stroke: var(--dorado);
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.rueda-punto { fill: var(--dorado); }
.rueda-fecha {
  margin-top: 10px;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--crema-30);
}
.rueda-fila {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}
.rueda-fila + .rueda-fila { border-top: 1px solid rgba(206, 170, 107, 0.10); }
.rueda-nombre {
  flex: 0 0 92px;
  font-size: 0.85rem;
  color: var(--crema);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rueda-fila input[type="range"] {
  flex: 1;
  min-width: 0;
  accent-color: var(--dorado);
}
.rueda-num {
  width: 22px;
  text-align: right;
  font-family: var(--f-display);
  color: var(--dorado);
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
}
.rueda-quitar {
  background: none;
  border: none;
  color: var(--crema-30);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 4px;
}
.rueda-quitar:hover { color: var(--crema); }
.rueda-add { display: flex; gap: 10px; margin-top: 14px; align-items: flex-end; }
.rueda-add input {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--dorado-borde);
  color: var(--crema);
  font-family: var(--f-body);
  font-size: 0.9rem;
  padding: 8px 2px;
}
.rueda-add input::placeholder { color: var(--crema-30); }
.rueda-add input:focus { outline: none; border-bottom-color: var(--dorado); }
.rueda-add .btn-quiet { margin: 0; }

/* ============================================================
   v0.5 — Quipu, chakanas de nivel, cápsula extra, frasco real
   ============================================================ */

/* Quipu */
.rueda-centro  { fill: none; stroke: var(--dorado); stroke-width: 1.6; opacity: 0.85; }
.rueda-centro2 { fill: var(--dorado); }
.rueda-cuerda  { stroke: rgba(206, 170, 107, 0.30); stroke-width: 1.2; }
.rueda-nudo    { fill: var(--dorado); }
.rueda-tick    { fill: rgba(244, 241, 227, 0.14); }

/* Nivel con chakanas */
.apu-dif { display: inline-flex; align-items: center; gap: 4px; }
.apu-dif-label {
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--crema-30);
  margin-right: 3px;
}
.apu-dif svg { width: 13px; height: 13px; overflow: visible; }
.apu-dif svg.on path { fill: var(--dorado); }
.apu-dif svg.off path { fill: none; stroke: var(--dorado-borde); stroke-width: 0.8; }

/* Cápsula extra */
.capsula-extra {
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--crema-30);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}
.capsula-extra .link-btn { text-decoration: none; }
.capsula-extra #addCapsula:hover { color: var(--dorado); }
.capsula-extra #undoCapsula { text-decoration: underline; }

/* Frasco real */
.bottle-ribs {
  stroke: rgba(206, 170, 107, 0.16);
  stroke-width: 1;
  fill: none;
}
.bottle-texto {
  fill: var(--crema);
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 7.5px;
  letter-spacing: 2.6px;
}