/* Los colores base ahora se derivan de los configurados en :root desde base.html */
:root {
  --c-verde: var(--color-primario);
  --c-lima: var(--color-secundario);
  --c-naranja: var(--color-acento);
  --c-rojo: #FB4141;
  --verde-principal: var(--color-primario);
  --verde-oscuro: var(--color-secundario);
  --gris-fondo:#f5f7f5;
  --borde-suave:#d9e8df;
  --texto-contraste: var(--color-seleccion);
}

body {background: var(--gris-fondo); font-family: system-ui, Arial, sans-serif; margin:0;}
header.hero {background: linear-gradient(135deg, var(--color-primario), var(--color-secundario)); color:var(--texto-contraste); padding:3rem 1.5rem; text-align:center;}
header.hero h1 {margin:0; font-size:2.4rem; letter-spacing:.5px;}
header.hero p {margin:.75rem 0 0; font-size:1.15rem; opacity:.95;}
.grid-modulos {display:grid; gap:1.25rem; padding:2rem 1.5rem; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); max-width:1200px; margin:0 auto;}
.tarjeta {background:#fff; border:1px solid var(--borde-suave); border-radius:14px; padding:1rem 1.1rem 1.2rem; position:relative; overflow:hidden; box-shadow:0 3px 6px rgba(0,0,0,.04); transition:.25s box-shadow,.25s transform;}
.tarjeta:hover {box-shadow:0 6px 18px rgba(0,0,0,.12); transform:translateY(-4px);} 
.tarjeta h3 {margin:.2rem 0 .6rem; font-size:1.05rem; color:#2d4720; letter-spacing:.3px;}
.tarjeta p {margin:0; font-size:.8rem; line-height:1.25rem; color:#444;}
.badge {position:absolute; top:0; right:0; background:linear-gradient(135deg,var(--c-naranja),var(--c-rojo)); color:#fff; font-size:.65rem; padding:.35rem .6rem; border-bottom-left-radius:10px; text-transform:uppercase; letter-spacing:.5px; font-weight:600;}
footer {text-align:center; margin:2rem 0 1rem; color:#555; font-size:.75rem;}
.btn-primario {display:inline-block; background:linear-gradient(135deg,var(--color-primario),var(--color-secundario)); color:var(--texto-contraste); padding:.7rem 1.1rem; margin-top:1.2rem; border-radius:8px; font-weight:600; text-decoration:none; letter-spacing:.4px; box-shadow:0 2px 4px rgba(0,0,0,.15); transition:background .25s, box-shadow .25s,color .25s;}
.btn-primario:hover {background:linear-gradient(135deg,var(--color-secundario),var(--color-primario)); color:var(--texto-contraste); box-shadow:0 4px 12px rgba(0,0,0,.25);} 
.small {font-size:.65rem; text-transform:uppercase; letter-spacing:.4px; opacity:.9;}
.mini-link {color: var(--c-rojo); text-decoration:none; font-weight:600;}
.mini-link:hover {text-decoration:underline;}

/* Acciones por módulo */
.acciones-mod {margin-top:.85rem; display:flex; flex-wrap:wrap; gap:.5rem;}
.btn-mod {display:inline-flex; align-items:center; gap:.4rem; font-size:.62rem; letter-spacing:.6px; font-weight:600; text-transform:uppercase; padding:.5rem .75rem; border-radius:30px; text-decoration:none; border:1px solid var(--borde-suave); background:#f7faf7; color:#24401b; box-shadow:0 2px 4px -2px rgba(0,0,0,.12); transition:.25s background,.25s color,.25s box-shadow,.25s transform;}
.btn-mod:hover {background:#e8f5e6; box-shadow:0 4px 10px -4px rgba(0,0,0,.18); transform:translateY(-2px);}
.btn-mod.primario {background:linear-gradient(135deg,var(--color-primario),var(--color-secundario)); color:var(--texto-contraste); border-color:var(--color-primario);} 
.btn-mod.primario:hover {background:linear-gradient(135deg,var(--color-secundario),var(--color-primario));}
.btn-mod.secundario {background:#fff;}
.btn-mod:active {transform:translateY(0);} 
.btn-mod:focus-visible {outline:3px solid rgba(120,200,65,.45); outline-offset:2px;}