/*
 * Aprentix · primitives compartidas (Solarpunk).
 *
 * Marca (logo con CSS mask), botones y toast que se usan idénticos en
 * las tres apps. Depende de shared/tokens.css.
 */

/* Reset universal a border-box: sin esto, un `width: 100%` con `padding`
 * termina sumando ambos y desbordando su contenedor — le pasó a
 * .auth-card en móvil y estaba cortando el formulario por la derecha. */
*, *::before, *::after { box-sizing: border-box; }

/* Base tipográfica accesible: 17px, altura de línea generosa y
 * antialiasing para que temarios largos no fatiguen. */
html {
  font-size: var(--font-size-base, 17px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  line-height: var(--line-height-base, 1.6);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.hidden { display: none !important; }
[hidden] { display: none !important; }

/* Logo mask: se colorea con currentColor. Ahora es notablemente más
 * grande para reforzar la identidad de marca. */
.brand-logo {
  width: 40px; height: 40px;
  display: inline-block;
  background: currentColor;
  -webkit-mask: url(/shared/logo.svg) center / contain no-repeat;
          mask: url(/shared/logo.svg) center / contain no-repeat;
  flex: 0 0 auto;
}
.brand-logo-lg { width: 88px; height: 88px; }
.brand-logo-xl { width: 120px; height: 120px; }

/* ── Botones ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.45rem;
  min-height: 46px; padding: 0.65rem 1.15rem;
  border: 0; border-radius: var(--radius);
  font-size: 1rem; font-weight: 600;
  cursor: pointer; font-family: inherit;
  letter-spacing: 0.01em;
  transition: background 0.18s ease, transform 0.1s ease, box-shadow 0.18s ease;
  color: var(--txt);
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn-primary, .btn-pri {
  background: var(--primary); color: #fff;
  box-shadow: 0 4px 12px rgba(107, 142, 35, 0.25);
}
.btn-primary:hover, .btn-pri:hover { background: var(--primary-hover); }
/* En modo noche el primario es cian brillante: el texto debe ser oscuro. */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-pri {
  color: #14241D;
  box-shadow: 0 4px 14px rgba(92, 229, 213, 0.30);
}
.btn-ghost { background: transparent; color: var(--txt); }
.btn-ghost:hover, .btn-ghost:active { background: var(--bg-soft); }
.btn-sec { background: var(--pri-light); color: var(--pri-d); }
.btn-sec:hover { background: var(--pri-soft); }
.btn-accent { background: var(--accent); color: #3B2A0F; }
.btn-accent:hover { background: var(--accent-d); color: #fff; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-cancel {
  background: var(--bg); color: var(--txt);
  border: 1px solid var(--border);
}
.btn-danger-outline {
  background: transparent; color: var(--danger);
  border: 1.5px solid var(--danger);
  min-height: 46px; padding: 0.65rem 1.15rem;
  border-radius: var(--radius);
  font-size: 1rem; font-weight: 700;
  cursor: pointer; font-family: inherit;
  transition: background 0.18s, color 0.18s;
}
.btn-danger-outline:hover { background: var(--danger); color: #fff; }
.btn-sm { min-height: 36px; padding: 0.4rem 0.8rem; font-size: 0.9rem; }

/* ── Toast ────────────────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 1rem;
  left: 1rem; right: 1rem;
  background: var(--txt); color: var(--bg);
  padding: 0.85rem 1.15rem; border-radius: var(--radius);
  text-align: center; z-index: 100; line-height: 1.4;
  font-size: 0.95rem;
  box-shadow: var(--shadow-md);
}
@media (min-width: 600px) {
  .toast {
    left: 50%; right: auto;
    transform: translateX(-50%); bottom: 2rem;
    text-align: left; min-width: 260px;
  }
}

/* ── Notificaciones de logros (gamificación) ─────────────────────────
 * Pila de tarjetas en la parte superior de la app.  Cada logro entra
 * desde arriba con un pequeño rebote, muestra icono + título + barra
 * verde que se rellena a 100% con una transición, y se auto-descarta.
 * Si se completan varios a la vez, las tarjetas se apilan verticalmente
 * y cada una anuncia su propio progreso.
 */
/* El stack de notificaciones vive siempre en la parte superior de la
 * pantalla — así al completar un test o un logro, la tarjeta aparece
 * arriba y no queda oculta bajo el bottom-nav ni tapa el CTA principal. */
.logros-notif-stack {
  position: fixed;
  top: calc(var(--topbar-h, 56px) + env(safe-area-inset-top, 0) + 0.6rem);
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: min(94vw, 420px);
  pointer-events: none;
}
.logro-notif {
  pointer-events: auto;
  display: grid;
  /* Icono a la izquierda, cuerpo a la derecha. Aumentamos la columna del
   * icono a 72 px para que la marca sea grande y legible de lejos. */
  grid-template-columns: 72px 1fr;
  gap: 0.9rem;
  align-items: center;
  background: var(--bg-panel);
  color: var(--txt);
  border: 1px solid var(--border);
  border-left: 4px solid var(--success);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  box-shadow: var(--shadow-lg);
  animation: logro-notif-in 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
.logro-notif.out {
  animation: logro-notif-out 0.32s ease forwards;
}
.logro-notif-icono {
  /* Máximo posible dentro de la columna: emoji ocupando todo el hueco. */
  font-size: 3.2rem;
  line-height: 1;
  text-align: center;
  filter: drop-shadow(0 2px 4px rgba(107, 142, 35, 0.28));
}
.logro-notif-body { min-width: 0; }
.logro-notif-head {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.15rem;
}
.logro-notif-head strong {
  font-size: 0.98rem;
  color: var(--success);
}
.logro-notif-head .logro-notif-xp {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent-d);
  background: var(--accent-soft);
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
}
.logro-notif-desc {
  font-size: 0.83rem;
  color: var(--txt-soft);
  line-height: 1.35;
  margin-bottom: 0.4rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.logro-notif-bar {
  height: 8px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.logro-notif-bar > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--grad-a), var(--success));
  box-shadow: 0 0 6px rgba(107, 142, 35, 0.5);
  transition: width 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s;
}
.logro-notif.done .logro-notif-bar > span { width: 100%; }
/* Retos: mismo diseño pero con acento coral en lugar de verde salvia, para
 * que el usuario distinga de un vistazo "hito único" de "objetivo recurrente". */
.logro-notif.es-reto { border-left-color: var(--coral); }
.logro-notif.es-reto .logro-notif-head strong { color: var(--coral-d); }
.logro-notif.es-reto .logro-notif-bar > span {
  background: linear-gradient(90deg, var(--accent), var(--coral));
  box-shadow: 0 0 6px var(--coral-soft);
}
/* El stack vive siempre arriba, así que las tarjetas bajan desde el
 * borde superior con un pequeño rebote. */
@keyframes logro-notif-in {
  0%   { opacity: 0; transform: translateY(-16px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0)     scale(1); }
}
@keyframes logro-notif-out {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-12px); }
}
/* Móvil: tarjeta un poco más compacta que en desktop, pero manteniendo el
 * icono grande — es el elemento que hay que reconocer de reojo. */
@media (max-width: 899.98px) {
  .logro-notif {
    grid-template-columns: 60px 1fr;
    gap: 0.7rem;
    padding: 0.7rem 0.85rem;
  }
  .logro-notif-icono { font-size: 2.6rem; }
  .logro-notif-head strong { font-size: 0.92rem; }
  .logro-notif-desc {
    font-size: 0.8rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .logro-notif-bar { height: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .logro-notif,
  .logro-notif.out { animation: none; }
  .logro-notif-bar > span { transition: none; }
}

/* Utilidad glassmorphism: barras y modales pueden usarla. */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-border);
}