:root{
  --verde:#2e7d32;
  --verde-claro:#43a047;
  --verde-oscuro:#1b5e20;
  --rojo:#c62828;
  --azul:#1565c0;
  --amarillo:#f9a825;
}

body{
  font-family: Arial;
  background-color:#f4f4f4;
  margin:0;
}

.navbar{
  background: linear-gradient(
    to right,
    var(--verde) 0%,
    var(--verde) 40%,
    var(--amarillo) 55%,
    var(--rojo) 70%,
    var(--azul) 85%,
    var(--azul) 100%
  );
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.navbar-brand{
  color:white !important;
  font-weight:bold;
}

.navbar-brand img{
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid white;
}

.nav-link{
  color:white !important;
  margin-left:10px;
  transition: all 0.3s;
}

.nav-link:hover{
  text-decoration:underline;
  color:var(--amarillo) !important;
}

.seccion{
  background-color:white;
  padding:25px;
  margin-bottom:30px;
  border-radius:10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  animation: aparecer 1s;
}

h2{
  color:var(--verde);
  border-bottom:3px solid transparent;
  border-image: linear-gradient(to right, var(--verde), var(--amarillo), var(--rojo), var(--azul)) 1;
  display:inline-block;
  padding-bottom:5px;
  margin-bottom: 20px;
}

h3{
  color:var(--verde-oscuro);
  margin-top:15px;
}

.img-seccion{
  width:100%;
  border-radius:10px;
  transition:0.5s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.img-seccion:hover{
  transform:scale(1.05);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

form label{
  font-weight:bold;
  color:var(--verde-oscuro);
}

input, textarea{
  border-radius:6px;
  border: 1px solid #ddd;
}

.btn-success{
  background-color:var(--verde);
  border:none;
  transition: all 0.3s;
}

.btn-success:hover{
  background-color:var(--verde-oscuro);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.btn-primary{
  background-color:var(--verde);
  border:none;
  transition: all 0.3s;
}

.btn-primary:hover{
  background-color:var(--verde-oscuro);
}

.pdf-viewer{
  width: 100%;
  height: 600px;
  border: 2px solid var(--verde);
  border-radius: 10px;
  margin: 20px 0;
}

.enlaces-tareas{
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 30px;
}

.enlace-tarea{
  flex: 1;
  min-width: 250px;
  padding: 20px;
  color: white;
  text-decoration: none;
  border-radius: 10px;
  text-align: center;
  transition: all 0.3s;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.enlace-tarea:nth-child(1){
  background: linear-gradient(135deg, var(--verde), var(--verde-claro));
}

.enlace-tarea:nth-child(2){
  background: linear-gradient(135deg, var(--amarillo), #fbc02d);
}

.enlace-tarea:nth-child(3){
  background: linear-gradient(135deg, var(--rojo), #d32f2f);
}

.enlace-tarea:hover{
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  color: white;
}

.enlace-tarea h4{
  margin: 0;
  font-size: 1.2rem;
  color: white;
}

@keyframes aparecer{
  from{
    opacity:0;
    margin-top:20px;
  }
  to{
    opacity:1;
    margin-top:0;
  }
}

a{
  color: var(--verde);
  text-decoration: none;
}

a:hover{
  color: var(--verde-oscuro);
}

.bg-verde { background-color: var(--verde) !important; }
.bg-amarillo { background-color: var(--amarillo) !important; }
.bg-rojo { background-color: var(--rojo) !important; }
.bg-azul { background-color: var(--azul) !important; }

.text-verde { color: var(--verde) !important; }
.text-amarillo { color: var(--amarillo) !important; }
.text-rojo { color: var(--rojo) !important; }
.text-azul { color: var(--azul) !important; }

.border-4-colores {
  border: 3px solid transparent;
  border-image: linear-gradient(to right, var(--verde), var(--amarillo), var(--rojo), var(--azul)) 1;
}

.cuatro-colores-dots::before {
  content: "● ● ● ●";
  display: block;
  text-align: center;
  font-size: 1.5rem;
  margin: 10px 0;
  background: linear-gradient(to right, var(--verde), var(--amarillo), var(--rojo), var(--azul));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}