/* ==== Reset básico ==== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

body {
  background-color: #f9f9f9;
  color: #333;
  line-height: 1.6;
}

/* ==== Encabezado ==== */
header {
  background: linear-gradient(90deg, #2e7d32, #81c784);
  color: white;
  padding: 20px;
  text-align: center;
}

header h1 {
  font-size: 2.2rem;
  margin-bottom: 5px;
}

header h2 {
  font-size: 1.2rem;
  font-weight: 300;
}

/* ==== Navegación ==== */
nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 15px;
}

nav ul li {
  margin: 5px 10px;
}

nav ul li a {
  text-decoration: none;
  background: #ffd600;
  color: #333;
  padding: 10px 15px;
  border-radius: 8px;
  font-weight: bold;
  transition: 0.3s;
}

nav ul li a:hover {
  background: #fbc02d;
  color: white;
}

/* ==== Contenido principal ==== */
main {
  max-width: 900px;
  margin: 40px auto;
  padding: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

main h2 {
  color: #2e7d32;
  margin-bottom: 15px;
}

main p, main ul, main ol {
  margin-bottom: 15px;
  text-align: justify;
}

main ul {
  list-style: disc;
  padding-left: 25px;
}

/* ==== Sección Upload ==== */
form {
  margin-top: 20px;
}

form label {
  font-weight: bold;
  display: block;
  margin-bottom: 8px;
}

form input[type="file"] {
  margin-bottom: 12px;
}

form button {
  background: #2e7d32;
  color: white;
  padding: 10px 18px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.3s;
}

form button:hover {
  background: #1b5e20;
}

/* ==== Pie de página ==== */
footer {
  text-align: center;
  background: #2e7d32;
  color: white;
  padding: 15px;
  margin-top: 40px;
  border-top: 4px solid #ffd600;
}

/* ==== Responsive ==== */
@media (max-width: 768px) {
  nav ul {
    flex-direction: column;
  }

  nav ul li {
    margin: 10px 0;
  }

}
    :root{
      --bg:#f6f8fa;
      --card:#ffffff;
      --accent:#2563eb;
      --muted:#6b7280;
    }
    *{box-sizing:border-box}

      
    header p{margin:0;color:var(--muted)}

    .grid{
      max-width:1100px;
      margin: 0 auto;
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
      gap:18px;
    }

    .card{
      background:var(--card);
      border-radius:12px;
      padding:14px;
      box-shadow:0 6px 18px rgba(15,23,42,0.06);
      text-align:center;
      transition:transform .12s ease, box-shadow .12s ease;
    }
    .card:hover{ transform: translateY(-4px); box-shadow:0 12px 28px rgba(15,23,42,0.08); }

    .avatar-wrap{
      width:140px;
      height:140px;
      margin:0 auto 12px;
      border-radius:12px;
      overflow:hidden;
      background:linear-gradient(180deg, #eef2ff 0%, #ffffff 100%);
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .avatar{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }

    h3{ margin:6px 0 4px; font-size:18px; }
    p.role{ margin:0 0 12px; color:var(--muted); font-size:14px; }

    .controls{
      display:flex;
      gap:8px;
      justify-content:center;
      align-items:center;
      flex-wrap:wrap;
    }
    .btn{
      padding:8px 12px;
      border-radius:10px;
      border:1px solid #e6edf8;
      background:#fff;
      cursor:pointer;
      font-size:14px;
    }
    .btn.primary{
      background:var(--accent);
      color:#fff;
      border:0;
    }
    .note{ font-size:13px; color:var(--muted); margin-top:10px; }

    /* ocultar input file real */
    input[type="file"]{ display:none; }

    /* modal sencillo */
    .modal{
      position:fixed;
      inset:0;
      display:none;
      align-items:center;
      justify-content:center;
      background:rgba(0,0,0,0.45);
      z-index:40;
    }
    .modal.open{ display:flex; }
    .modal .viewer{
      background:#fff;
      border-radius:10px;
      padding:12px;
      max-width:90%;
      max-height:90%;
    }
    .viewer img{ max-width:86vw; max-height:80vh; display:block; }

    @media (max-width:420px){
      .avatar-wrap{ width:120px; height:120px; }
    }