/* ============================================================
   pcard.css — Card de programa (componente compartido)
   Misma estética que las cards horneadas del index. Se carga en el catálogo
   (maestrias.html) para que sus cards hereden el lenguaje visual del index.
   ⚠️ Hoy las reglas .pcard* viven TAMBIÉN en css/index-home.css (que carga
   index.html). FOLLOW-UP de dedup: sacarlas de index-home.css y cargar este
   archivo también en index.html (single-source real). Por ahora, copia
   controlada: cada página carga UNA sola (index→index-home, catálogo→pcard).
   ============================================================ */

.pcard{ position:relative; background:#fff; border:1px solid #e7eaf1; border-radius:2px; padding:24px 24px 22px 26px; overflow:hidden; transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; }
.pcard::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--color-area,#1d2554); transition:width .2s ease; }
.pcard__eyebrow{ font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; color:var(--area-dark,#5a6270); font-weight:700; margin-bottom:9px; }
.pcard__title{ font-size:1.18rem; line-height:1.26; margin:0 0 14px; font-weight:800; letter-spacing:-.01em; }
.pcard__title a{ color:#1d2554; text-decoration:none; }
.pcard__title a:hover{ color:#005f80; text-decoration:underline; }
.pcard__cred{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.pcard__coneau{ display:inline-flex; align-items:center; gap:6px; align-self:flex-start; font-size:.78rem; font-weight:700; color:#1d2554; background:#eef1f7; border-radius:2px; padding:3px 9px; }
.pcard__coneau svg{ width:13px; height:13px; flex:none; }
.pcard__modo{ display:inline-flex; align-items:center; gap:8px; font-size:.82rem; font-weight:600; color:#1d2554; }
.pcard__live{ width:8px; height:8px; border-radius:50%; background:var(--color-area,#1d2554); flex:none; animation:pcardLive 1.8s infinite; }
@keyframes pcardLive{ 0%{opacity:1} 50%{transform:scale(1.25);opacity:.6} 100%{transform:scale(1);opacity:1} }
.pcard__rule{ border:0; border-top:1px solid #e7eaf1; margin:0 0 14px; }
.pcard__meta{ margin:0 0 18px; }
.pcard__meta>div{ display:flex; gap:12px; margin-bottom:7px; font-size:.875rem; align-items:baseline; }
.pcard__meta dt{ color:#5a6270; font-weight:700; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; min-width:90px; flex:none; }
.pcard__meta dd{ color:#353b47; margin:0; }
.pcard__acts{ display:flex; gap:10px; flex-wrap:wrap; }
/* Botones de la card. En el catálogo (maestrias.html) este archivo es la única
   fuente de estilo de .btn--primary/.btn--ghost (index-home.css NO se carga acá),
   por eso se definen scopeados a .pcard con hex de marca literales. */
.pcard .btn{ font-family:'Bitter',Georgia,serif; font-size:.88rem; font-weight:700; padding:11px 18px; min-height:44px; border-radius:2px; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; text-align:center; cursor:pointer; border:1.5px solid transparent; transition:background .15s,color .15s; }
.pcard .btn:focus-visible{ outline:3px solid #00b8db; outline-offset:2px; }
.pcard .btn--primary{ background:#1d2554; color:#fff; }
.pcard .btn--primary:hover{ background:#2c3875; color:#fff; }
.pcard .btn--ghost{ background:#fff; color:#1d2554; border-color:#1d2554; }
.pcard .btn--ghost:hover{ background:#1d2554; color:#fff; }
.pcard:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(29,37,84,.15); border-color:#d6dbe8; }
.pcard:hover::before{ width:7px; }
@media (prefers-reduced-motion:reduce){ .pcard,.pcard::before{transition:none} .pcard:hover{transform:none} .pcard__live{animation:none} }

/* tipo de ingreso en la card: admisión / directa / cupo */
.pcard__ingreso{ display:inline-block; align-self:flex-start; font-size:.76rem; font-weight:700; color:#1d2554; background:#eef1f7; border-radius:2px; padding:3px 9px; }
.pcard__ingreso--admision{ background:#fff; border:1.5px solid #1d2554; padding:2px 8px; }
.pcard__ingreso-nota{ display:block; font-size:.74rem; color:#5a6270; margin-top:3px; }

/* estado de inscripción por card: diferencia visual + anti-cul-de-sac */
.pcard__estado{ display:inline-block; align-self:flex-start; font-size:.74rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; border-radius:2px; padding:3px 9px; }
.pcard__estado--abierta{ background:#eaf5ec; color:#2e7d32; }
.pcard__estado--proxima{ background:#eef1f7; color:#5a6270; }
.pcard__estado--cerrada{ background:#f1f1f3; color:#6b6b6b; }
.pcard--proxima::before{ opacity:.55; }
.pcard--cerrada{ background:#fafafb; }
.pcard--cerrada::before{ background:#c2c6cf !important; }

/* ===== Variante CATÁLOGO (maestrias.html): más densidad para comparar ===== */
/* Etiquetas más largas (Modalidad/Cursada) → más ancho de dt. */
.pcard--catalogo .pcard__meta dt{ min-width:104px; }
/* Bloque destacado: título intermedio de Especialista (par mae+esp). Navy sobre
   verde muy claro = AAA; el verde solo en ícono/borde. */
.pcard__intermedio{ display:flex; align-items:flex-start; gap:8px; margin:0 0 14px; font-size:.84rem; font-weight:700; line-height:1.35; color:#1d2554; background:#eaf5ec; border-left:3px solid #2e7d32; border-radius:2px; padding:8px 11px; }
.pcard__intermedio svg{ width:16px; height:16px; flex:none; stroke:#2e7d32; margin-top:1px; }

/* ===== Mobile (catálogo en una sola columna): card más compacta + botones
   full-width apilados con tap target cómodo. La meta evita que dt fijos
   empujen el ancho. ===== */
@media (max-width:560px){
    .pcard{ padding:20px 18px 20px 20px; }
    .pcard__meta>div{ flex-wrap:wrap; gap:2px 12px; }
    .pcard--catalogo .pcard__meta dt,
    .pcard__meta dt{ min-width:0; }
    .pcard__acts{ gap:8px; }
    /* botones full-width + 44px de tap en mobile (accesibilidad; era la versión buena que vivía en
       index-home antes del dedup 25/6 — ahora la heredan index Y catálogos). */
    .pcard__acts .btn{ flex:1 1 100%; min-height:44px; display:flex; align-items:center; justify-content:center; }
}