/* FamilyPoints — sistema de diseño "familiar y ludico" (Fase visual)
   Paleta por dominio + tipografia redondeada + componentes reutilizables.
   Todo vive aqui para no repetir estilos sueltos en cada plantilla. */

:root {
  --fp-tasks: #4C6FFF;
  --fp-tasks-light: #EAEEFF;
  --fp-rewards: #9B5DE5;
  --fp-rewards-light: #F2E9FC;
  --fp-pomodoro: #FF8C42;
  --fp-pomodoro-light: #FFF0E2;
  --fp-gamification: #FFC93C;
  --fp-gamification-light: #FFF7E0;
  --fp-routines: #2EC4B6;
  --fp-routines-light: #E2F9F7;
  --fp-success: #3DDC97;
  --fp-danger: #FF5D5D;
  --fp-ink: #33334D;
  --fp-ink-soft: #6B6B85;
  --fp-bg: #F6F7FC;
  --fp-radius-lg: 1.5rem;
  --fp-radius-md: 1rem;
  --fp-shadow: 0 10px 25px -12px rgba(51, 51, 77, 0.25);
  --fp-shadow-sm: 0 4px 12px -6px rgba(51, 51, 77, 0.2);
  --font-heading: "Baloo 2", "Nunito", sans-serif;
  --font-body: "Nunito", sans-serif;
}

body {
  background: var(--fp-bg);
  font-family: var(--font-body);
  color: var(--fp-ink);
}

h1, h2, h3, h4, h5, h6, .fp-heading {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--fp-ink);
}

/* --- Navbar --- */
.fp-navbar {
  background: linear-gradient(135deg, var(--fp-tasks) 0%, #7B5CFA 100%);
  border-radius: 0 0 var(--fp-radius-lg) var(--fp-radius-lg);
  box-shadow: var(--fp-shadow);
}

.fp-navbar .navbar-brand {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* --- Tarjetas ---
   .fp-card reemplaza a la clase `card` de Bootstrap (no se usan juntas), asi
   que hay que redefinir aqui las custom properties que Bootstrap normalmente
   pone en `.card` — si no, `.card-body` (que lee `padding: var(--bs-card-spacer-y)
   var(--bs-card-spacer-x)`) hereda un padding de 0 y el contenido queda pegado
   a los bordes. */
.fp-card {
  --bs-card-spacer-y: 1rem;
  --bs-card-spacer-x: 1rem;
  --bs-card-title-spacer-y: .5rem;
  position: relative;
  background: #fff;
  border: none;
  border-radius: var(--fp-radius-lg);
  box-shadow: var(--fp-shadow-sm);
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}

.fp-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--fp-shadow);
}

/* Franja de color superior. Se hace con un ::before + overflow:hidden en vez
   de border-top: con el radio de borde grande de .fp-card, un border-top
   solo (sin bordes en los otros lados) se dibuja siguiendo el arco de la
   esquina y sale con un enganchado/curvado feo en vez de una linea recta. */
.fp-card-tasks::before,
.fp-card-rewards::before,
.fp-card-pomodoro::before,
.fp-card-gamification::before,
.fp-card-routines::before,
.fp-card-success::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
}

.fp-card-tasks::before { background: var(--fp-tasks); }
.fp-card-rewards::before { background: var(--fp-rewards); }
.fp-card-pomodoro::before { background: var(--fp-pomodoro); }
.fp-card-gamification::before { background: var(--fp-gamification); }
.fp-card-routines::before { background: var(--fp-routines); }
.fp-card-success::before { background: var(--fp-success); }

/* --- Insignias circulares de icono --- */
.fp-icon-badge {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.fp-icon-badge-lg { width: 4rem; height: 4rem; font-size: 1.9rem; }

.fp-icon-tasks { background: var(--fp-tasks-light); color: var(--fp-tasks); }
.fp-icon-rewards { background: var(--fp-rewards-light); color: var(--fp-rewards); }
.fp-icon-pomodoro { background: var(--fp-pomodoro-light); color: var(--fp-pomodoro); }
.fp-icon-gamification { background: var(--fp-gamification-light); color: #A87B00; }
.fp-icon-routines { background: var(--fp-routines-light); color: var(--fp-routines); }

/* --- Botones --- */
.btn {
  border-radius: 999px;
  font-weight: 700;
  font-family: var(--font-heading);
  letter-spacing: .01em;
}

.btn-primary {
  background: var(--fp-tasks);
  border-color: var(--fp-tasks);
}
.btn-primary:hover, .btn-primary:focus {
  background: #3958db;
  border-color: #3958db;
}

.btn-rewards {
  background: var(--fp-rewards);
  border-color: var(--fp-rewards);
  color: #fff;
}
.btn-rewards:hover { background: #8342cf; color: #fff; }

.btn-pomodoro {
  background: var(--fp-pomodoro);
  border-color: var(--fp-pomodoro);
  color: #fff;
}
.btn-pomodoro:hover { background: #e6752e; color: #fff; }

.btn-routines {
  background: var(--fp-routines);
  border-color: var(--fp-routines);
  color: #fff;
}
.btn-routines:hover { background: #24a99d; color: #fff; }

.btn-gamification {
  background: var(--fp-gamification);
  border-color: var(--fp-gamification);
  color: #33334D;
}
.btn-gamification:hover { background: #e6b52f; color: #33334D; }

/* --- Barras de progreso --- */
.fp-progress {
  height: 1.1rem;
  border-radius: 999px;
  background: #ECEEF7;
  overflow: hidden;
}
.fp-progress .progress-bar {
  border-radius: 999px;
  font-weight: 700;
}

/* --- Insignia de logro --- */
.fp-achievement-badge {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--fp-gamification) 0%, #FFA53C 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  box-shadow: var(--fp-shadow-sm);
  border: 3px solid #fff;
}

/* --- Estado vacio --- */
.fp-empty-state {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--fp-ink-soft);
}

/* --- Mascota --- */
.fp-mascot-sm { width: 56px; height: 56px; }
.fp-mascot-md { width: 96px; height: 96px; }
.fp-mascot-lg { width: 160px; height: 160px; }
.fp-mascot { animation: fp-bob 3.2s ease-in-out infinite; }

@keyframes fp-bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-6px) rotate(2deg); }
}

/* --- Animaciones de entrada --- */
.fp-pop-in { animation: fp-pop-in .35s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes fp-pop-in {
  0% { opacity: 0; transform: scale(.85) translateY(8px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* --- Alertas mas amigables --- */
.alert {
  border: none;
  border-radius: var(--fp-radius-md);
  font-weight: 600;
}

/* --- Hero de bienvenida (dashboards) --- */
.fp-hero {
  background: linear-gradient(135deg, #7B5CFA 0%, var(--fp-tasks) 100%);
  color: #fff;
  border-radius: var(--fp-radius-lg);
  box-shadow: var(--fp-shadow);
  padding: 2rem;
}
.fp-hero .fp-hero-sub { opacity: .9; }