/* =========================
   BASE / RESET
========================= */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; }

:root{
  --brand-900:#022e54;
  --brand-700:#032680;
  --brand-500:#022e54;
  --bg:#f5f7fb;
  --text:#032680;
  --border:#e6e9ef;
  --muted:#5f6b7a;
  --btn:#022e54;
  --btn-hover:#001d46;
  --link:#00247f;
}

body{
  min-height:100vh; display:flex; flex-direction:column;
  font-family:'Barlow SemiCondensed', Arial, sans-serif;
  background-color:var(--bg); color:var(--text);
}

/* Empujan el footer hacia abajo */
main, .page, .wrap, .wrapper{ flex:1 0 auto; }

/* =========================
   LAYOUT (GLOBAL SUAVE)
========================= */
.wrap{ max-width:1100px; margin:32px auto; padding:0 16px; }

/* Panel “simple” (con padding propio) */
.panel{
  width:auto; margin:18px 0; background:#fff; border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.06); padding:18px; border:1px solid var(--border);
}

/* Card con cabecera azul (padding dentro de .card__body) */
.card{
  width:auto; margin:18px 0; background:#fff; border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.06); border:1px solid var(--border);
  padding:0; overflow:hidden;  /* 👈 evita “doble padding” y redondea la franja */
}
.card__head{
  background:var(--brand-900); color:#fff;
  padding:14px 16px; font-weight:800; letter-spacing:.4px;
  text-transform:uppercase; border-radius:12px 12px 0 0;
}
.card__body{ padding:18px; }

/* =========================
   TITULOS
========================= */
.title{
  color:var(--brand-900); margin:0 0 14px; letter-spacing:.3px;
  text-align:center; font-weight:700;
}

/* =========================
   FORM / CONTROLES (unificados)
========================= */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select, textarea{
  height:44px; padding:10px 14px; width:100%; max-width:none;
  border:1px solid #dbe5f0; border-radius:12px; font-size:16px; background:#fff;
  color:#394150; font-weight:700; outline:none;
}
textarea{ min-height:90px; height:auto; resize:vertical; }

/* Línea del buscador */
.search{
  display:flex; gap:10px; align-items:center; justify-content:center;
  margin:8px 0 6px; flex-wrap:wrap;
}

/* =========================
   CAMPOS Y GRID (global)
========================= */
.grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{
  background:#fff; border:1px solid var(--border); border-radius:10px; padding:12px;
}
.field b{
  display:block; font-size:12px; color:#6b7280; margin-bottom:6px; letter-spacing:.2px;
}
.help{ font-size:12px; color:#6b7280; margin-top:6px; }

/* =========================
   BOTONES (global)
========================= */
.btn, .btn-outline{
  appearance:none; display:inline-block; text-decoration:none; cursor:pointer;
  border-radius:12px; padding:12px 18px; font-size:14px; line-height:1.1;
  font-weight:800; text-transform:uppercase;
}
.btn{ background:var(--btn); color:#fff; border:0; }
.btn:hover{ background:var(--btn-hover); }
.btn-outline{ background:#fff; color:var(--brand-900); border:2px solid var(--brand-900); }
.btn-outline:hover{ background:#f1f5fb; }

/* =========================
   TARJETAS / RESULTADOS
========================= */
.results{ display:flex; flex-direction:column; gap:16px; margin-top:14px; }
.res-card{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  background:#fff; border:1px solid var(--border); border-radius:14px;
  padding:18px 20px; box-shadow:0 8px 22px rgba(0,0,0,.06);
}
.res-data{ min-width:0; }
.res-name{
  margin:0 0 4px; font-weight:800; text-transform:uppercase;
  letter-spacing:.4px; color:var(--brand-900);
}
.res-meta{ margin:0; color:var(--muted); font-size:15px; line-height:1.35; }
.res-actions .btn{ min-width:120px; text-align:center; }

/* =========================
   PROGRAMA (listado)
========================= */
.programa{
  background:#fff; padding:20px; margin:15px 0; border-left:5px solid var(--brand-700);
  border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.programa h3{ margin:0 0 6px; color:var(--brand-900); font-size:20px; }
.programa p{ margin:5px 0; font-size:16px; color:#333; }

/* =========================
   TEXTOS AUX / ALERTAS
========================= */
.muted{ color:#6c7a89; }
.notfound{
  background:#fff4e5; border:1px solid #ffd9a8; border-radius:10px; padding:12px 14px; color:#7a4a00; margin-top:18px;
}

/* =========================
   FOOTER
========================= */
footer{
  margin-top:auto; background-color:var(--brand-900); color:#fff; font-family:Arial, sans-serif;
}
footer a{ color:#ccc; text-decoration:none; }
footer a:hover{ color:#fff; text-decoration:underline; }
footer ul{ list-style:none; padding:0; margin:0; }
footer i{ font-size:20px; }
.footer-bottom{ background-color:#2366d1; padding:10px 20px; text-align:center; font-size:14px; color:#fff; }

/* =========================
   OVERRIDES CON SCOPE
========================= */
/* wrapper ancho en páginas destacadas */
body.page-alumni .wrap,
body.page-institucion .wrap{
  max-width:1360px !important; margin:32px auto !important; padding:0 24px !important;
}
/* contenedores anchos y consistentes */
body.page-alumni .panel,
body.page-alumni .card,
body.page-alumni .res-card,
body.page-alumni .programa,
body.page-institucion .panel,
body.page-institucion .card,
body.page-institucion .res-card,
body.page-institucion .programa{
  max-width:1240px !important; width:100% !important; margin-left:auto !important; margin-right:auto !important;
  border-radius:14px !important; box-shadow:0 8px 22px rgba(0,0,0,.06) !important;
}
/* buscador ancho */
body.page-alumni .search input,
body.page-institucion .search input{ width:100% !important; max-width:none !important; height:44px; border-radius:12px; }
body.page-alumni .search button,
body.page-institucion .search button{ height:44px; border-radius:12px; font-weight:700; }

/* grid/campos con más aire */
body.page-alumni .grid, body.page-institucion .grid{
  display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:22px !important;
}
body.page-alumni .field, body.page-institucion .field{ padding:14px; border-radius:10px; }
body.page-alumni .field b, body.page-institucion .field b{ font-size:12px; margin-bottom:6px; }
body.page-alumni .field input, body.page-alumni .field select,
body.page-institucion .field input, body.page-institucion .field select{ height:46px; font-size:16px; }

/* botoneras centradas */
body.page-alumni .actions, body.page-institucion .actions{ gap:16px; margin-top:28px; justify-content:center; }
body.page-alumni .actions .btn, body.page-institucion .actions .btn{ padding:12px 20px; border-radius:12px; font-weight:800; }

/* más ancho en pantallas grandes */
@media (min-width:1440px){
  body.page-alumni .wrap, body.page-institucion .wrap{ max-width:1480px !important; }
  body.page-alumni .panel, body.page-alumni .card, body.page-alumni .res-card, body.page-alumni .programa,
  body.page-institucion .panel, body.page-institucion .card, body.page-institucion .res-card, body.page-institucion .programa{
    max-width:1320px !important;
  }
}

/* responsive general */
@media (max-width:900px){
  .grid{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  .panel{ padding:16px; }
  .card__body{ padding:16px; }
  .res-card{ flex-direction:column; align-items:flex-start; }
  .res-actions{ width:100%; } .res-actions .btn{ width:100%; }
}
/* mobile para páginas anchas */
@media (max-width:820px){
  body.page-alumni .grid, body.page-institucion .grid{ grid-template-columns:1fr !important; gap:14px !important; }
  body.page-alumni .panel, body.page-alumni .card,
  body.page-institucion .panel, body.page-institucion .card{ padding:0 !important; } /* .card mantiene padding en .card__body */
}
