/* ================================
   IDEA Extraescolares – Estilos base
   ================================ */

/* Paleta inspirada en el logo */
:root{
  --idea-blue:   #1F3F8B;
  --idea-yellow: #FECF3E;
  --idea-green:  #3A8D5E;
  --idea-orange: #F28C38;
  --idea-rose:   #E95A77;

  --text:        #1e293b;
  --muted:       #64748b;
  --bg:          #F7F8FA;
  --card:        #ffffff;
  --ring:        rgba(31, 63, 139, .15);
}

/* Fondo general */
body.bg-page{
  background:
    radial-gradient(60rem 60rem at 120% -20%, rgba(254,207,62,.15), transparent 60%),
    radial-gradient(55rem 55rem at -10% 110%, rgba(58,141,94,.12), transparent 60%),
    linear-gradient(135deg, #f9fafc, #f0f4ff);
  font-family: 'Inter', sans-serif;
  color: var(--text);
}

/* ----------------
   Navbar
   ---------------- */
.navbar{
  font-weight: 500;
  padding-top: 1rem;           /* + alto */
  padding-bottom: 1rem;        /* + alto */
  background: var(--card);
  border-bottom: 3px solid var(--idea-yellow);
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
}

.navbar-brand{
  display:flex; align-items:center; gap:.6rem;
  font-weight: 800;
  letter-spacing:.2px;
}
.navbar-brand img{ height: 48px; }
.navbar .nav-link{
  color: var(--text);
  opacity:.9;
}
.navbar .nav-link:hover{ color: var(--idea-blue); }

/* ----------------
   Botones
   ---------------- */
.btn{
  border-radius: 28px;
  padding: .6rem 1.3rem;
  font-weight: 600;
}

.btn-primary{
  background: linear-gradient(90deg, var(--idea-blue), var(--idea-green));
  border: none;
  color: #fff;
  box-shadow: 0 6px 16px var(--ring);
}
.btn-primary:hover{
  filter: brightness(.97);
}

.btn-outline-primary{
  color: var(--idea-blue);
  border: 2px solid var(--idea-blue);
  background: transparent;
}
.btn-outline-primary:hover{
  background: var(--idea-blue);
  color: #fff;
}

.btn-accent{
  background: linear-gradient(90deg, var(--idea-yellow), var(--idea-orange));
  border: none; color:#1b1b1b;
}
.btn-accent:hover{ filter: brightness(.98); }

/* ----------------
   Tipografía
   ---------------- */
h1,h2,h3,h4,h5{
  font-weight: 700;
  color: var(--text);
}
.lead{ color: var(--muted); }

/* ----------------
   Cards y contenedores
   ---------------- */
.card{
  background: var(--card);
  border: none;
  border-radius: 20px;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
}
.section-title{
  border-left: 6px solid var(--idea-green);
  padding-left: .75rem;
}

/* ----------------
   Hero (portada)
   ---------------- */
.hero{
  background: radial-gradient(70rem 70rem at 100% -20%, rgba(233,90,119,.12), transparent 60%),
              linear-gradient(135deg, #ffffff, #f7fbff);
  border-radius: 22px;
  padding: 2.2rem 1.8rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.05);
}

/* ----------------
   Formularios
   ---------------- */
.form-control{
  border-radius: 14px;
  border: 2px solid #e6e9f1;
}
.form-control:focus{
  border-color: var(--idea-blue);
  box-shadow: 0 0 0 .25rem var(--ring);
}
.form-label{ font-weight: 600; color: var(--text); }

/* ----------------
   Calendario (píldoras)
   ---------------- */
.calendar-grid{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1rem;
}
.calendar-col{
  background: var(--card);
  border-radius: 16px;
  padding: .8rem;
  box-shadow: 0 6px 16px rgba(0,0,0,.05);
}
.calendar-col h6{
  font-weight: 700;
  color: var(--idea-blue);
  margin-bottom: .6rem;
}
.event-pill{
  background: linear-gradient(90deg, rgba(31,63,139,.07), rgba(58,141,94,.07));
  border: 1px dashed rgba(31,63,139,.25);
  border-radius: 14px;
  padding: .55rem .7rem;
  margin-bottom: .5rem;
}
.event-pill .event-meta{ font-size: .85rem; color:#6b7280; }
.event-pill.cancelled {
  background: linear-gradient(90deg, #f8d7da, #f1b0b7); /* degradado rojo claro */
  border: 1px solid #dc3545;  /* borde rojo Bootstrap */
  color: #842029;             /* texto rojo oscuro */
}

.event-pill.cancelled .event-meta,
.event-pill.cancelled .fw-semibold {
  color: #842029 !important;  /* mismo tono rojo oscuro */
  text-decoration: line-through;
}
.event-meta{
  font-size:.9rem;
  color: var(--muted);
}

/* ----------------
   Badges
   ---------------- */
.badge-paid{
  background: rgba(58,141,94,.12);
  color: var(--idea-green);
  border-radius: 999px;
  padding: .35rem .7rem;
  font-weight: 600;
}
.badge-unpaid{
  background: rgba(233,90,119,.12);
  color: var(--idea-rose);
  border-radius: 999px;
  padding: .35rem .7rem;
  font-weight: 600;
}

/* ----------------
   Footer
   ---------------- */
footer{
  margin-top: 4rem;
  color: var(--muted);
}