/* ============================================================
   TarotAI · v19.5 — CAJÓN DE NAVEGACIÓN
   ------------------------------------------------------------
   El Inicio se reservó a lo esencial (subir → leer → interpretar).
   Los 23 módulos y los widgets de «Hoy» viven aquí, agrupados
   por intención y buscables.

   Se carga DESPUÉS de style.css y premium.css, así que redefine
   a propósito .side-menu / .side-body a de aquellos ficheros.
   ============================================================ */

/* ─── Panel ─────────────────────────────────────────────── */
.side-menu {
  /* Más ancho que los 280px originales: las fichas llevan
     icono 3D + título + subtítulo en una sola línea de lectura. */
  width: min(340px, 88vw);
  background: linear-gradient(180deg, #12122c 0%, #0c0c1e 100%);
  box-shadow: 8px 0 40px rgba(0, 0, 0, .55);
  overscroll-behavior: contain;
}

.side-top {
  gap: 12px;
  background: linear-gradient(135deg, rgba(139, 92, 246, .14), rgba(245, 158, 11, .06));
}
.side-logo {
  width: 34px; height: 34px;
  border-radius: 50%;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5));
}
.side-top button {
  border-radius: 50%;
  background: rgba(255, 255, 255, .05);
  transition: background .18s ease, transform .18s ease;
}
.side-top button:hover { background: rgba(255, 255, 255, .12); transform: rotate(90deg); }

/* ─── Buscador ──────────────────────────────────────────── */
.side-search {
  position: relative;
  display: flex; align-items: center; gap: 9px;
  margin: 12px 14px 4px;
  padding: 0 12px;
  height: 40px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  transition: border-color .2s ease, background .2s ease;
}
.side-search:focus-within {
  border-color: rgba(167, 139, 250, .5);
  background: rgba(139, 92, 246, .09);
}
.side-search > i { font-size: 12px; color: var(--text-muted); flex: 0 0 auto; }
.side-search input {
  flex: 1; min-width: 0;
  background: none; border: 0; outline: none;
  color: var(--text-primary);
  font-family: inherit; font-size: 13.5px;
}
.side-search input::placeholder { color: var(--text-muted); }
/* El aspa nativa de type=search duplicaría nuestro botón */
.side-search input::-webkit-search-cancel-button { display: none; }
.side-search-clear {
  flex: 0 0 auto;
  width: 22px; height: 22px; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 11px;
  background: rgba(255, 255, 255, .07);
}
.side-search.has-text .side-search-clear { display: flex; }

/* ─── Cuerpo y grupos ───────────────────────────────────── */
.side-body { padding: 8px 0 16px; }

.side-group { margin-top: 6px; }
.side-group[hidden] { display: none; }

.side-group-h {
  display: flex; align-items: center; gap: 8px;
  margin: 14px 0 6px;
  padding: 0 18px;
  font-family: 'Cinzel', serif;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted);
}
.side-group-h i { font-size: 10px; color: var(--primary-light); }

/* ─── Ficha de módulo (icono 3D + título + subtítulo) ───── */
.side-mod {
  display: flex; align-items: center; gap: 12px;
  margin: 4px 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s var(--ease-spring, cubic-bezier(.34, 1.56, .64, 1));
}
.side-mod:hover, .side-mod:focus-visible {
  background: var(--gradient-card);
  border-color: var(--border);
}
.side-mod:active { transform: scale(.975); }
.side-mod[hidden] { display: none; }

.side-mod-txt { min-width: 0; }
.side-mod-txt strong {
  display: block;
  font-size: 13px; font-weight: 650;
  color: var(--text-primary);
  line-height: 1.25;
}
.side-mod-txt small {
  display: block;
  font-size: 10.5px; color: var(--text-muted);
  line-height: 1.35; margin-top: 1px;
}

/* Los iconos del sprite se reutilizan tal cual, un pelín menores */
.side-mod .qa-ico { --size: 30px; }
.side-mod:hover .qa-ico, .side-mod:focus-visible .qa-ico {
  transform: translateY(-2px) scale(1.08) rotate(-3deg);
  filter: drop-shadow(0 5px 9px rgba(0, 0, 0, .55))
          drop-shadow(0 0 7px rgba(212, 175, 55, .35));
}

/* ─── Enlace simple (pantallas y ajustes) ───────────────── */
.side-body a.side-lnk {
  display: flex; align-items: center; gap: 12px;
  margin: 2px 10px;
  padding: 11px 12px;
  border-radius: var(--radius-md);
  font-size: 13.5px; font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.side-body a.side-lnk:hover,
.side-body a.side-lnk:focus-visible,
.side-body a.side-lnk:active {
  background: rgba(255, 255, 255, .045);
  color: var(--text-primary);
}
.side-lnk[hidden] { display: none; }
.side-fa {
  width: 30px; text-align: center;
  font-size: 15px; color: var(--primary-light);
  flex: 0 0 auto;
}
.side-lnk-danger { color: var(--danger-light); }
.side-lnk-danger .side-fa { color: var(--danger-light); }
.side-lnk-danger:hover { background: rgba(239, 68, 68, .09); color: var(--danger-light); }

/* ─── Bloque «Hoy» dentro del menú ──────────────────────── */
.side-today { padding: 0 12px; display: grid; gap: 10px; }
.side-today .moon-widget,
.side-today .daily-wrap {
  margin: 0;
  padding: 12px;
  background: var(--gradient-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 12.5px;
}
/* La ficha del día es densa: se comprime para el ancho del cajón */
.side-today .daily-wrap h4 { font-size: 14px !important; }
.side-today .daily-wrap p { font-size: 12px !important; }

/* ─── Sin resultados ────────────────────────────────────── */
.side-empty {
  padding: 26px 20px; text-align: center;
  font-size: 12.5px; color: var(--text-muted);
}

/* ============================================================
   INICIO · llamada a explorar el menú
   ============================================================ */
.explore-cta {
  display: flex; align-items: center; gap: 13px;
  width: 100%;
  margin: 18px 0 4px;
  padding: 15px 16px;
  text-align: left;
  background: var(--gradient-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), border-color .25s ease;
}
.explore-cta:hover { border-color: rgba(167, 139, 250, .42); }
.explore-cta:active { transform: scale(.975); }

.explore-cta-ico {
  flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--gradient-primary);
  color: #fff; font-size: 18px;
  box-shadow: 0 4px 14px rgba(102, 126, 234, .38);
}
.explore-cta-txt { flex: 1; min-width: 0; }
.explore-cta-txt strong {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: 14.5px; font-weight: 700; color: var(--text-primary);
}
.explore-cta-txt small {
  display: block;
  font-size: 11.5px; color: var(--text-muted); margin-top: 2px;
}
.explore-cta-arrow { color: var(--text-muted); font-size: 13px; flex: 0 0 auto; }

/* ─── Adaptaciones ──────────────────────────────────────── */
@media (max-width: 380px) {
  .side-menu { width: 92vw; }
  .side-mod .qa-ico { --size: 27px; }
  .side-mod-txt strong { font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .side-mod, .side-mod:active,
  .explore-cta, .explore-cta:active,
  .side-top button:hover,
  .side-mod:hover .qa-ico {
    transition: none; transform: none;
  }
}