/* Fuente base recomendada */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

/* --------------------------------------
   TOKENS DE TEMA EDUFIS
-----------------------------------------*/
:root {
  /* Gradientes por familia */
  --edufis-mental-start: #A78BFA;   /* primario */
  --edufis-mental-end:   #6366F1;
  --edufis-fisico-start: #34D399;   /* éxito */
  --edufis-fisico-end:   #3B82F6;
  --edufis-interior-start:#FBBF24;  /* aviso */
  --edufis-interior-end:  #F97316;
  --edufis-peligro-start: #ef4444;  /* peligro */
  --edufis-peligro-end:   #dc2626;
  --edufis-sec-start:     #64748b;  /* secundario */
  --edufis-sec-end:       #475569;
  --edufis-info-start:    #22d3ee;  /* info */
  --edufis-info-end:      #0ea5e9;

  /* Neutros y radios */
  --edufis-pill-radius: 999px;
  --edufis-soft-radius: 14px;
  --edufis-shadow: 0 6px 14px rgba(0,0,0,0.14);
  --edufis-border: 1px solid rgba(15, 23, 42, 0.08);
}

body {
  font-family: 'Poppins', sans-serif;
  background-color: #f9f9f9;
  color: #333;
}

/* --------------------------------------
   NAVBAR ESTILO EDUFIS
-----------------------------------------*/

.navbar-edufis {
  background: linear-gradient(135deg, #5EC5D4, #6366F1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.navbar-edufis .container-fluid {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar-edufis .navbar-toggler { display: block; }
@media (min-width: 992px) {
  .navbar-edufis .navbar-toggler { display: none; }
}

/* Fallback si no está Bootstrap: quitar viñetas y alinear en fila */
.navbar-edufis .navbar-nav,
.navbar .navbar-nav,
.navbar-nav {
  list-style: none;
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}

.navbar-edufis .navbar-nav .nav-item,
.navbar .navbar-nav .nav-item,
.navbar-nav .nav-item {
  list-style: none;
}

.navbar-edufis .navbar-brand {
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.navbar-edufis .nav-link,
.navbar .nav-link {
  color: #e8f5ff;
  font-weight: 500;
  margin: 0;
  text-decoration: none;
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
}

.navbar-edufis .nav-link:hover,
.navbar-edufis .nav-link:focus,
.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
}

.navbar-edufis .nav-link.active,
.navbar .nav-link.active {
  color: #0e1b4d;
  background-color: #ffffff;
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
}

.navbar-edufis .navbar-text,
.navbar .navbar-text {
  color: #f4fbff;
}

.navbar-edufis .btn-light,
.navbar .btn-light {
  color: #1f2a44;
}

/* Ajustes de alineación del contenedor de enlaces para centrarlos */
.navbar-edufis #navMain {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 12px;
}
.navbar-edufis .navbar-nav {
  flex: 1;
  justify-content: center;
  flex-wrap: wrap;
}

/* Forzar sin subrayado en cualquier enlace dentro del navbar */
.navbar-edufis a,
.navbar-edufis a:link,
.navbar-edufis a:visited {
  text-decoration: none !important;
  color: #e8f5ff;
}

/* --------------------------------------
   BOTONES ESTILO LOS MUNDOS EDUFIS
-----------------------------------------*/

/* Estilo base común para todos los botones */
.boton-base {
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 16px;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  cursor: pointer;
  text-align: center;
  display: inline-block;
}

/* Mundo social-emocional (azul a menta) */
.boton-edufis {
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 16px;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  cursor: pointer;
  text-align: center;
  display: inline-block;
  background: linear-gradient(135deg, #5EC5D4, #76E3A6);
}

.boton-edufis:hover {
  background: linear-gradient(135deg, #76E3A6, #5EC5D4);
  transform: scale(1.03);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* Mundo mental (lavanda a violeta educativo) */
.boton-mental {
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 16px;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  cursor: pointer;
  text-align: center;
  display: inline-block;
  background: linear-gradient(135deg, #A78BFA, #6366F1);
}

.boton-mental:hover {
  background: linear-gradient(135deg, #6366F1, #A78BFA);
  transform: scale(1.03);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* Mundo interior (naranja cálido a coral) */
.boton-interior {
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 16px;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  cursor: pointer;
  text-align: center;
  display: inline-block;
  background: linear-gradient(135deg, #FBBF24, #F97316);
}

.boton-interior:hover {
  background: linear-gradient(135deg, #F97316, #FBBF24);
  transform: scale(1.03);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* Mundo físico (verde a azul) */
.boton-fisico {
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 16px;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  cursor: pointer;
  text-align: center;
  display: inline-block;
  background: linear-gradient(135deg, #34D399, #3B82F6);
}

.boton-fisico:hover {
  background: linear-gradient(135deg, #3B82F6, #34D399);
  transform: scale(1.03);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* Mundo emocional (rosa a naranja) */
.boton-emocional {
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 16px;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  cursor: pointer;
  text-align: center;
  display: inline-block;
  background: linear-gradient(135deg, #F472B6, #F97316);
}

.boton-emocional:hover {
  background: linear-gradient(135deg, #F97316, #F472B6);
  transform: scale(1.03);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* Ajustes generales */
.btn-primary { color:#fff; background: linear-gradient(135deg, var(--edufis-mental-start), var(--edufis-mental-end)); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--edufis-shadow); background: linear-gradient(135deg, var(--edufis-mental-end), var(--edufis-mental-start)); }
.btn-success { color:#fff; background: linear-gradient(135deg, var(--edufis-fisico-start), var(--edufis-fisico-end)); }
.btn-success:hover { transform: translateY(-1px); box-shadow: var(--edufis-shadow); background: linear-gradient(135deg, var(--edufis-fisico-end), var(--edufis-fisico-start)); }
.btn-warning { color:#1f2937; background: linear-gradient(135deg, var(--edufis-interior-start), var(--edufis-interior-end)); }
.btn-warning:hover { transform: translateY(-1px); box-shadow: var(--edufis-shadow); background: linear-gradient(135deg, var(--edufis-interior-end), var(--edufis-interior-start)); }
.btn-danger { color:#fff; background: linear-gradient(135deg, var(--edufis-peligro-start), var(--edufis-peligro-end)); }
.btn-danger:hover { transform: translateY(-1px); box-shadow: var(--edufis-shadow); background: linear-gradient(135deg, var(--edufis-peligro-end), var(--edufis-peligro-start)); }
.btn-secondary { color:#fff; background: linear-gradient(135deg, var(--edufis-sec-start), var(--edufis-sec-end)); }
.btn-secondary:hover { transform: translateY(-1px); box-shadow: var(--edufis-shadow); background: linear-gradient(135deg, var(--edufis-sec-end), var(--edufis-sec-start)); }
.btn-info { color:#0f172a; background: linear-gradient(135deg, var(--edufis-info-start), var(--edufis-info-end)); }
.btn-info:hover { transform: translateY(-1px); box-shadow: var(--edufis-shadow); filter: brightness(0.95); }
.btn-light { color:#0f172a; background: #ffffff; border: var(--edufis-border); }
.btn-light:hover { background:#f3f4f6; box-shadow: var(--edufis-shadow); }
.btn-outline-primary { color: var(--edufis-mental-end); border: 2px solid var(--edufis-mental-end); background: transparent; }
.btn-outline-primary:hover { color:#fff; background: linear-gradient(135deg, var(--edufis-mental-start), var(--edufis-mental-end)); border-color: transparent; }
.btn-outline-success { color: var(--edufis-fisico-end); border: 2px solid var(--edufis-fisico-end); background: transparent; }
.btn-outline-success:hover { color:#fff; background: linear-gradient(135deg, var(--edufis-fisico-start), var(--edufis-fisico-end)); border-color: transparent; }
.btn-outline-warning:hover { color:#1f2937; background: linear-gradient(135deg, var(--edufis-interior-start), var(--edufis-interior-end)); border-color: transparent; }
.btn-outline-danger { color: var(--edufis-peligro-end); border: 2px solid var(--edufis-peligro-end); background: transparent; }
.btn-outline-danger:hover { color:#fff; background: linear-gradient(135deg, var(--edufis-peligro-start), var(--edufis-peligro-end)); border-color: transparent; }

/* Tarjetas visuales */
.card-edufis {
  border-radius: var(--edufis-soft-radius);
  border: var(--edufis-border);
  box-shadow: var(--edufis-shadow);
}