:root{
  --green:#1f7a3f;
  --green-2:#166534;
  --green-soft:#e9f6ef;

  --bg:#f8fafc;
  --text:#0f172a;
  --muted:#64748b;

  --border:#e5e7eb;
  --shadow:0 1px 2px rgba(15,23,42,.06);
  --shadow-hover:0 10px 26px rgba(15,23,42,.10);

  --radius:12px;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}

a{ color:inherit; text-decoration:none; }

/* ===== Header (más presencia) ===== */
.topbar{
  background:#fff;
  border-bottom:1px solid var(--border);
  padding: 1.1rem 1.6rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
}

.brand{
  display:flex;
  flex-direction:column;
  line-height:1.05;
}

.logo{
  font-weight:900;
  font-size:2.1rem;
  letter-spacing:.6px;
}

.tagline{
  margin-top:.2rem;
  color:var(--muted);
  font-size:1rem;
}

/* ===== Botones ===== */
.btn{
  padding:.62rem 1.05rem;
  border-radius:10px;
  font-weight:700;
  border:1px solid transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.btn-primary{
  background:var(--green);
  color:#fff;
}
.btn-primary:hover{
  background:var(--green-2);
}

/* ===== Layout ===== */
.container{
  max-width:1200px;
  margin:0 auto;
  padding: 1.1rem 1.6rem 2.2rem;
}

/* ===== Nota principal ===== */
.notice{
  background:#fff;
  border:1px solid var(--border);
  border-left:4px solid var(--green);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:.85rem 1rem;
  margin:0 0 1rem;
}

/* ===== Buscador ===== */
.searchbar{
  display:flex;
  gap:.6rem;
  align-items:center;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:.75rem;
  margin-bottom:1rem;
}

.searchbar input[type="text"]{
  flex:1;
  border:1px solid var(--border);
  border-radius:10px;
  padding:.7rem .75rem;
  font-size:1rem;
  outline:none;
}

.searchbar input[type="text"]:focus{
  border-color: rgba(31,122,63,.45);
  box-shadow: 0 0 0 3px rgba(31,122,63,.12);
}

/* ===== Grid tarjetas ===== */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap:.95rem;
}

/* ===== Tarjeta ===== */
.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:.95rem 1rem;
  display:flex;
  gap:.75rem;
  align-items:flex-start;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

.card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(31,122,63,.30);
  background: linear-gradient(180deg, #fff 0%, var(--green-soft) 160%);
}

/* ===== “Icono” mínimo institucional (NO puede verse grande) ===== */
.card-ico{
  width:3px;
  height:18px;
  margin-top:.2rem;
  border-radius:2px;
  background:var(--green);
  opacity:.65;
  flex:0 0 auto;
}

/* Texto tarjeta */
.card-body{ min-width:0; }
.card strong{
  display:block;
  font-size:1.02rem;
  margin-bottom:.08rem;
}
.card span{
  display:block;
  font-size:.9rem;
  color:var(--muted);
  line-height:1.2rem;
}

/* ===== Footer ===== */
.footer{
  border-top:1px solid var(--border);
  background:#fff;
  padding:1rem 1.6rem 1.2rem;
  margin-top:1.2rem;
}

.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  justify-content:center;
  margin-bottom:.55rem;
}

.footer-links a{
  color:var(--green);
  font-weight:700;
}
.footer-links a:hover{
  text-decoration:underline;
}

.footer-copy{
  text-align:center;
  font-size:.88rem;
  color:var(--muted);
}

/* ===== Responsive ===== */
@media (max-width:720px){
  .topbar{ padding:.95rem 1rem; }
  .container{ padding:.9rem 1rem 1.6rem; }
  .logo{ font-size:1.7rem; }
  .tagline{ display:none; }
  .grid{ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .card{ padding:.9rem; }
  .card-ico{ height:16px; }
}
``