@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;900&family=Barlow+Condensed:wght@600;700;800;900&display=swap');

/* ─────────────────────────────────────────────
   VARIABLES
───────────────────────────────────────────── */
:root{
  --dk:      #054f4b;
  --dk2:     #033d3a;
  --dkl:     #0a7a73;
  --pnp:     #003a70;
  --accent:  #e8b84b;
  --danger:  #c0392b;
  --success: #1a8a4a;
  --bg:      #eef0f3;
  --surface: #ffffff;
  --border:  #d8dde4;
  --text:    #1a2332;
  --muted:   #6b7a8d;
  --hover:   #f0f7f6;
}

/* ─────────────────────────────────────────────
   RESET
───────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  font-family:'Barlow',sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
}

/* Todas las imágenes contenidas por defecto */
img{
  display:block;
  max-width:100%;
  height:auto;
}

/* ══════════════════════════════════════════════
   ██████  PORTADA PÚBLICA
   ══════════════════════════════════════════════ */

/* ── Portada completa fondo oscuro ── */
#portada{
  background:#0b1622;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* ── Header portada ── */
.ph{
  background:rgba(5,15,30,.97);
  border-bottom:1px solid rgba(255,255,255,.08);
  position:sticky;top:0;z-index:200;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.ph-inner{
  max-width:1280px;margin:0 auto;
  padding:0 20px;height:58px;
  display:flex;align-items:center;
  justify-content:space-between;gap:12px;
}
.ph-brand{display:flex;align-items:center;gap:9px;flex-shrink:0;text-decoration:none}
.ph-logo{
  width:36px;height:36px;border-radius:50%;
  border:2px solid var(--dkl);object-fit:contain;
  padding:3px;background:rgba(10,122,115,.15);
  flex-shrink:0;
}
.ph-name{
  font-family:'Barlow Condensed',sans-serif;
  font-size:.95rem;font-weight:900;
  letter-spacing:.06em;text-transform:uppercase;color:#fff;line-height:1;
}
.ph-name span{color:var(--accent)}
.ph-sub{font-size:.58rem;color:rgba(255,255,255,.45);letter-spacing:.06em;font-weight:600;text-transform:uppercase}
.ph-right{display:flex;align-items:center;gap:7px;flex-shrink:0;position:relative}
.ph-input{
  padding:6px 10px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);border-radius:7px;
  color:#fff;font-family:'Barlow',sans-serif;font-size:.8rem;
  width:120px;transition:all .2s;
}
.ph-input::placeholder{color:rgba(255,255,255,.4)}
.ph-input:focus{outline:none;border-color:var(--dkl);background:rgba(255,255,255,.1);width:140px}
.ph-btn-login{
  padding:6px 14px;background:var(--dkl);color:#fff;border:none;
  border-radius:7px;font-family:'Barlow Condensed',sans-serif;
  font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;transition:background .2s;white-space:nowrap;
}
.ph-btn-login:hover{background:var(--dk)}
.ph-btn-admin,.ph-btn-sistema,.ph-btn-salir{
  padding:6px 12px;border-radius:7px;
  font-family:'Barlow Condensed',sans-serif;font-size:.78rem;
  font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  cursor:pointer;transition:all .2s;white-space:nowrap;display:none;
}
.ph-btn-admin{background:rgba(232,184,75,.15);border:1px solid rgba(232,184,75,.35);color:var(--accent)}
.ph-btn-admin:hover{background:rgba(232,184,75,.3)}
.ph-btn-sistema{background:var(--dkl);color:#fff;border:none}
.ph-btn-sistema:hover{background:var(--dk)}
.ph-btn-salir{background:rgba(192,57,43,.2);border:1px solid rgba(192,57,43,.4);color:#f5a99e}
.ph-btn-salir:hover{background:rgba(192,57,43,.45);color:#fff}
.ph-login-err{
  position:absolute;top:100%;right:0;
  color:#f5a99e;font-size:.7rem;
  white-space:nowrap;padding-top:3px;pointer-events:none;
}

/* ── Hero ── */
.hero{
  background:linear-gradient(160deg,#050f1e 0%,#0c2442 45%,#033d3a 100%);
  padding:52px 20px 44px;text-align:center;
  position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% -10%,rgba(10,122,115,.28) 0%,transparent 65%);
  pointer-events:none;
}
.hero::after{
  content:'';position:absolute;bottom:0;left:0;right:0;
  height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);
}
.hero-dots{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(circle,rgba(232,184,75,.12) 1px,transparent 1px),
    radial-gradient(circle,rgba(10,122,115,.08) 1px,transparent 1px);
  background-size:48px 48px,28px 28px;background-position:0 0,14px 14px;
}
.hero-logo{
  width:96px;height:96px;border-radius:50%;
  border:3px solid var(--accent);object-fit:contain;
  padding:6px;background:rgba(232,184,75,.08);
  box-shadow:0 0 36px rgba(232,184,75,.18),0 0 72px rgba(10,122,115,.18);
  margin:0 auto 18px;position:relative;z-index:1;
}
.hero-inst{
  font-family:'Barlow Condensed',sans-serif;font-size:.72rem;
  font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin-bottom:7px;position:relative;z-index:1;
}
.hero-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(1.6rem,5vw,2.8rem);font-weight:900;
  letter-spacing:.03em;text-transform:uppercase;color:#fff;
  line-height:1.1;margin-bottom:7px;position:relative;z-index:1;
}
.hero-title em{font-style:normal;color:var(--accent)}
.hero-sub{
  color:rgba(255,255,255,.5);font-size:clamp(.82rem,2vw,.95rem);
  max-width:560px;margin:0 auto 22px;position:relative;z-index:1;line-height:1.55;
}
.hero-chips{
  display:flex;justify-content:center;gap:8px;
  flex-wrap:wrap;position:relative;z-index:1;
}
.hero-chip{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  padding:4px 12px;border-radius:20px;font-size:.72rem;
  font-weight:600;color:rgba(255,255,255,.65);
}

/* ── Sección cursos portada ── */
.portal-main{
  background:#0b1622;  /* fondo oscuro igual que el hero */
  padding:36px 20px 56px;
}
.portal-main-inner{max-width:1280px;margin:0 auto}
.portal-sec-hdr{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:20px;flex-wrap:wrap;gap:10px;
}
.portal-sec-title{
  font-family:'Barlow Condensed',sans-serif;font-size:1.1rem;
  font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#fff;
}
.portal-sec-title span{color:var(--accent)}

/* ── Grid de tarjetas de cursos (portada) ──
   IMPORTANTE: imagen fija en contenedor controlado */
.pc-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:18px;
}
.pc-card{
  background:#14243a;border:1px solid rgba(255,255,255,.08);
  border-radius:14px;overflow:hidden;cursor:pointer;
  transition:transform .25s,box-shadow .25s,border-color .25s;
  display:flex;flex-direction:column;
}
.pc-card:hover{
  transform:translateY(-5px);border-color:var(--accent);
  box-shadow:0 16px 44px rgba(0,0,0,.4),0 0 0 1px rgba(232,184,75,.2);
}
/* Contenedor de imagen con altura FIJA */
.pc-card-img{
  width:100%;height:160px;
  background:linear-gradient(135deg,#0c2442,#033d3a);
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.pc-card-img::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 30% 70%,rgba(10,122,115,.25),transparent 65%);
}
/* Imagen dentro del contenedor: object-fit contain, tamaño máximo */
.pc-card-img img{
  width:auto;height:100%;max-width:100%;max-height:140px;
  object-fit:contain;position:relative;z-index:1;
  filter:drop-shadow(0 3px 12px rgba(0,0,0,.4));
  display:block;margin:0 auto;
}
.pc-status{
  position:absolute;top:10px;right:10px;
  padding:3px 9px;border-radius:20px;font-size:.62rem;
  font-family:'Barlow Condensed',sans-serif;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;z-index:2;
  white-space:nowrap;
}
.pcs-open  {background:rgba(26,138,74,.9);color:#fff}
.pcs-soon  {background:rgba(232,184,75,.9);color:#111}
.pcs-closed{background:rgba(80,80,80,.8);color:#bbb}
.pc-edit-btn{
  position:absolute;top:9px;left:9px;
  background:rgba(5,79,75,.75);border:1px solid rgba(10,122,115,.5);
  color:#7de0d8;padding:3px 8px;border-radius:5px;
  font-size:.6rem;font-family:'Barlow Condensed',sans-serif;
  font-weight:700;cursor:pointer;text-transform:uppercase;z-index:2;
  transition:all .15s;display:none;
}
.pc-edit-btn:hover{background:var(--dkl);color:#fff}
.pc-card-body{padding:16px 18px;display:flex;flex-direction:column;flex:1}
.pc-nombre{
  font-family:'Barlow Condensed',sans-serif;font-size:.9rem;
  font-weight:800;color:#fff;text-transform:uppercase;
  letter-spacing:.02em;margin-bottom:7px;line-height:1.25;
}
.pc-meta{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px}
.pc-meta-item{font-size:.7rem;color:rgba(255,255,255,.5);font-weight:600}
.pc-desc{font-size:.78rem;color:rgba(255,255,255,.55);line-height:1.5;margin-bottom:14px;flex:1}
.btn-pc-req{
  width:100%;padding:9px;
  background:rgba(10,122,115,.18);border:1px solid rgba(10,122,115,.4);
  color:#7de0d8;border-radius:7px;
  font-family:'Barlow Condensed',sans-serif;font-size:.78rem;
  font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  cursor:pointer;transition:all .2s;
}
.btn-pc-req:hover{background:rgba(10,122,115,.45);color:#fff}

/* ── Footer portada ── */
.portal-footer{
  background:#050e1a;border-top:1px solid rgba(255,255,255,.07);
  padding:18px 20px;text-align:center;
  font-size:.72rem;color:rgba(255,255,255,.4);line-height:1.7;
}
.portal-footer strong{color:rgba(255,255,255,.65)}

/* ── Modal requisitos (portada) ── */
.req-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.78);z-index:900;
  align-items:center;justify-content:center;padding:16px;
}
.req-overlay.open{display:flex}
.req-box{
  background:#14243a;border:1px solid rgba(255,255,255,.1);
  border-radius:14px;width:100%;max-width:580px;
  max-height:92vh;overflow-y:auto;
  box-shadow:0 28px 72px rgba(0,0,0,.55);
  animation:mIn .22s cubic-bezier(.34,1.56,.64,1);
}
@keyframes mIn{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.req-hdr{
  height:100px;display:flex;align-items:center;
  gap:14px;padding:0 20px;position:relative;
  background:linear-gradient(135deg,#0c2442,#033d3a);
  overflow:hidden;flex-shrink:0;
}
/* Imagen dentro del modal-hdr también controlada */
.req-hdr img{
  width:64px;height:64px;object-fit:contain;flex-shrink:0;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.4));
  display:block;
}
.req-hdr-txt h2{
  font-family:'Barlow Condensed',sans-serif;font-size:1rem;
  font-weight:900;color:#fff;text-transform:uppercase;letter-spacing:.03em;
}
.req-hdr-txt p{color:var(--accent);font-size:.75rem;font-weight:600;margin-top:3px}
.btn-req-close{
  position:absolute;top:10px;right:10px;
  background:rgba(255,255,255,.1);border:none;color:#fff;
  width:28px;height:28px;border-radius:50%;font-size:.95rem;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .15s;
}
.btn-req-close:hover{background:rgba(255,255,255,.22)}
.req-body{padding:22px}
.req-fechas{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.req-fc{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  border-radius:9px;padding:11px 13px;
}
.req-fc-lbl{font-size:.64rem;font-weight:700;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.07em;margin-bottom:3px}
.req-fc-val{font-family:'Barlow Condensed',sans-serif;font-size:1rem;font-weight:800;color:var(--accent)}
.req-stitle{
  font-family:'Barlow Condensed',sans-serif;font-size:.75rem;
  font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);margin:16px 0 9px;
  padding-bottom:5px;border-bottom:1px solid rgba(232,184,75,.18);
}
.req-stitle:first-of-type{margin-top:0}
.req-ul{list-style:none}
.req-ul li{
  display:flex;align-items:flex-start;gap:7px;
  padding:5px 0;font-size:.82rem;color:rgba(255,255,255,.75);
  border-bottom:1px solid rgba(255,255,255,.04);
}
.req-ul li::before{content:'▸';color:var(--dkl);flex-shrink:0;margin-top:1px}
.btn-req-volver{
  width:100%;margin-top:18px;padding:10px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.65);border-radius:8px;
  font-family:'Barlow Condensed',sans-serif;font-size:.82rem;
  font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  cursor:pointer;transition:all .2s;
}
.btn-req-volver:hover{background:rgba(255,255,255,.1);color:#fff}

/* ══════════════════════════════════════════════
   ██████  SISTEMA INTERNO
   ══════════════════════════════════════════════ */
#sistema{
  min-height:100vh;display:flex;flex-direction:column;
  position:relative;
}
#sistema::before{
  content:'';position:fixed;inset:0;
  background-image:
    linear-gradient(rgba(5,79,75,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(5,79,75,.04) 1px,transparent 1px);
  background-size:40px 40px;pointer-events:none;z-index:0;
}

/* ── Topbar ── */
.topbar{
  background:var(--dk2);padding:0 20px;
  height:54px;display:flex;align-items:center;
  justify-content:space-between;gap:8px;
  box-shadow:0 2px 12px rgba(0,0,0,.2);
  position:sticky;top:0;z-index:200;
}
.topbar-brand{display:flex;align-items:center;gap:8px;flex-shrink:0}
.topbar-logo{
  width:30px;height:30px;border-radius:50%;
  object-fit:contain;background:rgba(255,255,255,.1);padding:3px;flex-shrink:0;
}
.topbar-name{
  font-family:'Barlow Condensed',sans-serif;font-size:.95rem;
  font-weight:700;color:#fff;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;
}
.topbar-name span{color:var(--accent)}
.topbar-nav{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.topbar-btn{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.85);padding:5px 11px;border-radius:6px;
  font-family:'Barlow Condensed',sans-serif;font-size:.78rem;
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;transition:all .2s;white-space:nowrap;
}
.topbar-btn:hover{background:rgba(255,255,255,.15);color:#fff}
.topbar-btn.active{background:var(--dkl);border-color:var(--dkl);color:#fff}
.btn-logout{
  background:rgba(192,57,43,.25);border:1px solid rgba(192,57,43,.5);
  color:#f5a99e;padding:5px 11px;border-radius:6px;
  font-family:'Barlow Condensed',sans-serif;font-size:.78rem;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;transition:all .2s;white-space:nowrap;flex-shrink:0;
}
.btn-logout:hover{background:rgba(192,57,43,.5);color:#fff}

/* ── Main content ── */
.main-content{flex:1;position:relative;z-index:1}

/* ── Inicio ── */
#menu-section{padding:32px 20px 48px;text-align:center}
.menu-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(1.3rem,4vw,1.8rem);font-weight:900;
  color:var(--dk);letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px;
}
.menu-sub{color:var(--muted);font-size:.88rem;margin-bottom:24px}
.menu-cursos-strip{
  display:flex;flex-wrap:wrap;justify-content:center;gap:14px;
  margin:0 auto 32px;padding:14px;
  background:var(--surface);border-radius:14px;
  box-shadow:0 2px 12px rgba(0,0,0,.06);max-width:900px;
}
.strip-curso{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  cursor:pointer;transition:transform .2s;
}
.strip-curso:hover{transform:translateY(-3px)}
.strip-curso img{
  width:48px;height:48px;object-fit:contain;
  border-radius:8px;background:#f0f4f8;padding:4px;
  box-shadow:0 2px 8px rgba(0,0,0,.1);
}
.strip-curso span{
  font-family:'Barlow Condensed',sans-serif;font-size:.6rem;
  font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--dk);
}
.stats-row{
  display:flex;justify-content:center;gap:12px;
  margin-bottom:32px;flex-wrap:wrap;
}
.stat-card{
  background:var(--surface);border-radius:12px;
  padding:16px 20px;min-width:140px;flex:1;max-width:200px;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
  border-left:4px solid var(--dk);text-align:left;
}
.stat-card.blue {border-left-color:var(--pnp)}
.stat-card.gold {border-left-color:var(--accent)}
.stat-card.green{border-left-color:var(--success)}
.stat-num{
  font-family:'Barlow Condensed',sans-serif;font-size:2rem;
  font-weight:900;color:var(--text);line-height:1;
}
.stat-lbl{
  font-size:.68rem;color:var(--muted);font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;margin-top:4px;
}
.module-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:20px;max-width:780px;margin:0 auto;
}
.module-card{
  background:var(--surface);padding:28px 20px;border-radius:14px;
  text-align:center;cursor:pointer;border:2px solid transparent;
  box-shadow:0 4px 20px rgba(0,0,0,.07);
  transition:all .25s cubic-bezier(.34,1.56,.64,1);
  position:relative;overflow:hidden;
}
.module-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--dk),var(--dkl));
  transform:scaleX(0);transition:transform .3s;
}
.module-card:hover{transform:translateY(-6px);border-color:var(--dkl);box-shadow:0 14px 36px rgba(5,79,75,.18)}
.module-card:hover::before{transform:scaleX(1)}
.module-icon{width:64px;height:64px;margin:0 auto 14px;object-fit:contain}
.module-card h3{
  font-family:'Barlow Condensed',sans-serif;font-size:1rem;
  font-weight:800;color:var(--dk);letter-spacing:.05em;text-transform:uppercase;margin-bottom:4px;
}
.module-card p{font-size:.76rem;color:var(--muted)}

/* ── Secciones internas ── */
.internal-section{
  display:none;padding:20px 16px;
  animation:sysIn .25s ease;
}
@keyframes sysIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.section-header{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:16px;flex-wrap:wrap;gap:10px;
}
.section-title{
  font-family:'Barlow Condensed',sans-serif;font-size:1.05rem;
  font-weight:800;color:var(--dk);letter-spacing:.06em;text-transform:uppercase;
}

/* ── Botones generales ── */
.btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:8px 14px;border-radius:7px;border:none;
  font-family:'Barlow Condensed',sans-serif;font-size:.82rem;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;transition:all .18s;white-space:nowrap;
}
.btn-primary{background:var(--dk);color:#fff}
.btn-primary:hover{background:var(--dk2)}
.btn-success{background:var(--success);color:#fff}
.btn-success:hover{background:#126e3a}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{background:#a02e23}
.btn-gray{background:#6b7a8d;color:#fff}
.btn-gray:hover{background:#58687a}
.btn-pdf{background:#c0392b;color:#fff}
.btn-pdf:hover{background:#a02e23}
.btn-sm{padding:5px 10px;font-size:.73rem}
.btn-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:8px;border:1.5px solid transparent;
  cursor:pointer;font-size:1rem;transition:all .15s;flex-shrink:0;background:transparent;
}
.btn-icon-ver {background:#e8f5e9;border-color:#a5d6a7;color:#1a6632}
.btn-icon-ver:hover {background:#1a6632;color:#fff}
.btn-icon-edit{background:#fff8e1;border-color:#ffe082;color:#7b5e00}
.btn-icon-edit:hover{background:#f59f00;color:#fff}
.btn-icon-del {background:#fde8e8;border-color:#f5a99e;color:#c0392b}
.btn-icon-del:hover {background:#c0392b;color:#fff}

/* ── Tabla personal ── */
.table-surface{
  background:var(--surface);border-radius:12px;
  box-shadow:0 2px 16px rgba(0,0,0,.07);overflow:hidden;
}
.table-toolbar{
  padding:14px 16px;border-bottom:1px solid var(--border);
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
}
.search-input{
  flex:1;min-width:180px;
  padding:9px 12px 9px 34px;border:1.5px solid var(--border);
  border-radius:8px;font-size:.85rem;font-family:'Barlow',sans-serif;
  transition:border-color .2s,box-shadow .2s;
  background:#fafbfc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7a8d' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 11px center;
  color:var(--text);
}
.search-input:focus{outline:none;border-color:var(--dk);box-shadow:0 0 0 3px rgba(5,79,75,.1);background-color:#fff}
.filter-select{
  padding:9px 10px;border:1.5px solid var(--border);border-radius:8px;
  font-size:.82rem;font-family:'Barlow',sans-serif;color:var(--text);
  cursor:pointer;background:#fafbfc;min-width:130px;
}
.filter-select:focus{outline:none;border-color:var(--dk)}
.counter-badge{
  background:var(--dk);color:#fff;
  padding:5px 12px;border-radius:20px;
  font-size:.73rem;font-weight:700;letter-spacing:.04em;white-space:nowrap;
}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:.82rem}
thead th{
  background:#f5f7f9;color:var(--pnp);
  font-family:'Barlow Condensed',sans-serif;font-size:.78rem;
  font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:10px 12px;border-bottom:2px solid var(--border);
  white-space:nowrap;cursor:pointer;user-select:none;
}
thead th:hover{background:#ebeff3}
tbody tr{border-bottom:1px solid #f0f2f5;transition:background .12s}
tbody tr:hover{background:var(--hover)}
tbody td{padding:8px 12px;color:var(--text);vertical-align:middle}
.badge{
  display:inline-block;padding:3px 8px;border-radius:20px;
  font-size:.68rem;font-weight:700;letter-spacing:.04em;white-space:nowrap;
}
.badge-contra{background:#e0f2f0;color:var(--dk);border:1px solid #a8d8d4}
.badge-none  {background:#f0f2f5;color:var(--muted);border:1px solid var(--border)}
.acciones-cell{display:flex;gap:4px;align-items:center}

/* ── Paginación ── */
.pagination{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;border-top:1px solid var(--border);flex-wrap:wrap;gap:8px;
}
.rows-select{
  padding:5px 8px;border:1.5px solid var(--border);border-radius:6px;
  font-size:.80rem;font-family:'Barlow',sans-serif;cursor:pointer;
}
.page-info{font-size:.76rem;color:var(--muted)}
.page-controls{display:flex;gap:3px;flex-wrap:wrap}
.page-btn{
  width:32px;height:32px;border:1.5px solid var(--border);
  background:var(--surface);border-radius:6px;font-size:.78rem;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;
  cursor:pointer;transition:all .15s;
  display:flex;align-items:center;justify-content:center;color:var(--text);
}
.page-btn:hover{background:var(--hover);border-color:var(--dk)}
.page-btn.active{background:var(--dk);color:#fff;border-color:var(--dk)}
.page-btn:disabled{opacity:.35;cursor:not-allowed}

/* ── Modales sistema ── */
.modal-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.55);z-index:1000;
  align-items:center;justify-content:center;padding:16px;
}
.modal-overlay.open{display:flex}
.modal-box{
  background:var(--surface);border-radius:14px;width:100%;max-width:680px;
  box-shadow:0 24px 64px rgba(0,0,0,.3);overflow:hidden;
  animation:modalIn .22s cubic-bezier(.34,1.56,.64,1);
  max-height:92vh;display:flex;flex-direction:column;
}
@keyframes modalIn{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.modal-top{
  background:linear-gradient(135deg,var(--dk2),var(--dk));
  padding:16px 20px;display:flex;justify-content:space-between;
  align-items:center;flex-shrink:0;
}
.modal-top h3{
  font-family:'Barlow Condensed',sans-serif;font-size:.95rem;
  font-weight:800;color:#fff;letter-spacing:.07em;text-transform:uppercase;
}
.btn-close{
  background:rgba(255,255,255,.15);border:none;color:#fff;
  width:28px;height:28px;border-radius:50%;font-size:1rem;
  cursor:pointer;transition:background .15s;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.btn-close:hover{background:rgba(255,255,255,.3)}
.modal-body{padding:20px;overflow-y:auto;flex:1}
.grid-inputs{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:12px;margin-bottom:12px;
}
.field-group{display:flex;flex-direction:column;gap:5px}
.field-group label{font-size:.68rem;font-weight:700;color:var(--muted);letter-spacing:.07em;text-transform:uppercase}
.field-group input,
.field-group select,
.field-group textarea{
  padding:8px 10px;border:1.5px solid var(--border);border-radius:7px;
  font-size:.84rem;font-family:'Barlow',sans-serif;color:var(--text);
  transition:border-color .2s,box-shadow .2s;background:#fff;
}
.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus{
  outline:none;border-color:var(--dk);box-shadow:0 0 0 3px rgba(5,79,75,.1);
}
.modal-footer{
  display:flex;justify-content:flex-end;gap:10px;
  padding:14px 20px;border-top:1px solid var(--border);
  background:#fafbfc;flex-shrink:0;
}
.detail-row{
  display:flex;gap:8px;padding:9px 0;
  border-bottom:1px solid #f0f2f5;font-size:.84rem;
}
.detail-row:last-child{border:none}
.detail-key{color:var(--muted);font-weight:600;min-width:150px;font-size:.71rem;text-transform:uppercase;letter-spacing:.04em;flex-shrink:0}
.detail-val{color:var(--text);font-weight:500;word-break:break-word}

/* ── Loading ── */
.loading-indicator{text-align:center;padding:40px;color:var(--muted);font-size:.9rem}
.spinner{
  display:inline-block;width:28px;height:28px;
  border:3px solid var(--border);border-top-color:var(--dk);
  border-radius:50%;animation:spin .7s linear infinite;margin-bottom:10px;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Toast ── */
#toast-container{
  position:fixed;bottom:20px;right:16px;z-index:9999;
  display:flex;flex-direction:column;gap:8px;
  max-width:calc(100vw - 32px);
}
.toast{
  background:var(--text);color:#fff;
  padding:11px 16px;border-radius:8px;font-size:.83rem;
  font-weight:500;box-shadow:0 8px 24px rgba(0,0,0,.2);
  display:flex;align-items:center;gap:10px;
  animation:toastIn .3s ease;max-width:320px;
}
.toast.success{background:var(--success)}
.toast.error  {background:var(--danger)}
.toast.info   {background:var(--pnp)}
@keyframes toastIn {from{transform:translateX(120%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes toastOut{to{transform:translateX(120%);opacity:0}}

/* ── Footer sistema ── */
.main-footer{
  background:var(--surface);padding:12px 20px;
  border-top:1px solid var(--border);text-align:center;
  font-size:.72rem;color:var(--muted);line-height:1.7;
  position:relative;z-index:1;
}
.main-footer strong{color:var(--dk)}

/* ── Organigrama ── */
.org-container{overflow-x:auto;overflow-y:visible;padding:16px 8px 40px;-webkit-overflow-scrolling:touch}
.org-tree{display:flex;flex-direction:column;align-items:center;min-width:max-content;margin:0 auto}
.org-connector-down{
  width:2px;height:28px;
  background:linear-gradient(to bottom,var(--accent),rgba(232,184,75,.4));
  margin:0 auto;flex-shrink:0;
}
.org-children-row{display:flex;align-items:flex-start;justify-content:center;gap:20px;flex-wrap:nowrap}
.org-child-col{display:flex;flex-direction:column;align-items:center}
.rank-general   {background:linear-gradient(135deg,#0d0d2b,#1a1a4e)}
.rank-coronel   {background:linear-gradient(135deg,#002759,#003a70)}
.rank-comandante{background:linear-gradient(135deg,#0a3050,#1a5276)}
.rank-mayor     {background:linear-gradient(135deg,#033d3a,#054f4b)}
.rank-capitan   {background:linear-gradient(135deg,#0d4a22,#1a6632)}
.rank-teniente  {background:linear-gradient(135deg,#243d0a,#3a6611)}
.rank-alferez   {background:linear-gradient(135deg,#4a3800,#7b5e00)}
.rank-suboficial{background:linear-gradient(135deg,#3d2010,#6b3a1a)}
.rank-civil     {background:linear-gradient(135deg,#2d2d2d,#444)}
.org-node{
  background:linear-gradient(175deg,#1e2d3d 0%,#0f1e2b 100%);
  border:1.5px solid rgba(232,184,75,.25);border-radius:14px;
  width:180px;overflow:hidden;
  box-shadow:0 6px 24px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.06) inset;
  transition:box-shadow .25s,transform .2s,border-color .2s;flex-shrink:0;
}
.org-node:hover{box-shadow:0 12px 40px rgba(0,0,0,.65),0 0 0 2px var(--accent);transform:translateY(-5px);border-color:var(--accent)}
.org-node-top-stripe{height:7px;width:100%}
.org-stripe-txt{
  display:block;text-align:center;
  font-family:'Barlow Condensed',sans-serif;font-size:.6rem;
  font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.5);padding:5px 4px 2px;background:rgba(0,0,0,.3);
}
.org-photo-ring{display:flex;justify-content:center;padding:10px 0 5px}
.org-node-photo{
  width:88px;height:88px;border-radius:50%;object-fit:cover;
  border:3px solid var(--accent);
  box-shadow:0 0 0 4px rgba(232,184,75,.18),0 6px 18px rgba(0,0,0,.55);
  background:#263547;display:block;
}
.org-node-body{padding:4px 10px 10px;text-align:center}
.org-rango-pill{
  display:inline-block;margin:4px 0 6px;padding:3px 12px;border-radius:20px;
  font-family:'Barlow Condensed',sans-serif;font-size:.66rem;font-weight:900;
  letter-spacing:.1em;text-transform:uppercase;color:#fff;border:1px solid rgba(255,255,255,.2);
}
.org-nombre{font-family:'Barlow Condensed',sans-serif;font-size:.78rem;font-weight:800;color:#e8edf2;line-height:1.3;margin-bottom:4px;word-break:break-word}
.org-cargo{font-size:.63rem;color:var(--accent);font-weight:600;letter-spacing:.05em;text-transform:uppercase;line-height:1.3}
.org-node-footer{display:flex;justify-content:center;gap:6px;padding:7px 8px 9px;border-top:1px solid rgba(255,255,255,.07)}
.org-btn-edit,.org-btn-del{flex:1;font-size:.62rem;padding:5px 4px;border-radius:6px;border:1px solid transparent;cursor:pointer;font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.05em;text-transform:uppercase;transition:all .15s}
.org-btn-edit{background:rgba(10,122,115,.3);color:#7de0d8;border-color:rgba(10,122,115,.5)}
.org-btn-edit:hover{background:#0a7a73;color:#fff}
.org-btn-del{background:rgba(192,57,43,.25);color:#f5a99e;border-color:rgba(192,57,43,.5)}
.org-btn-del:hover{background:#c0392b;color:#fff}
.org-node.root-node{width:210px}
.org-node.root-node .org-node-photo{width:108px;height:108px}
.org-node.root-node .org-nombre{font-size:.88rem}
.org-node.root-node .org-cargo{font-size:.7rem}
.org-node.root-node .org-rango-pill{font-size:.72rem;padding:4px 14px}
.org-toolbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-bottom:14px;padding:12px 14px;
  background:var(--surface);border-radius:10px;box-shadow:0 1px 6px rgba(0,0,0,.05);
}
.org-legend{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.legend-item{display:flex;align-items:center;gap:5px;font-size:.68rem;font-weight:600;color:var(--text)}
.legend-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0}
.org-zoom-btns{display:flex;gap:4px;margin-left:auto}
.org-zoom-btn{
  width:32px;height:32px;border:1.5px solid var(--border);
  background:var(--surface);border-radius:6px;font-size:1.1rem;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .15s;font-weight:700;
}
.org-zoom-btn:hover{background:var(--hover);border-color:var(--dk)}
.org-scale-wrap{overflow:auto;max-width:100%}

/* ── Cursos ── */
#cursos-section{padding:20px 16px}
.cursos-filtros{background:var(--surface);border-radius:12px;padding:16px;margin-bottom:16px;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.filtros-titulo{font-family:'Barlow Condensed',sans-serif;font-size:.82rem;font-weight:800;color:var(--dk);letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.curso-chips{display:flex;flex-wrap:wrap;gap:10px}
.curso-chip{
  display:flex;align-items:center;gap:10px;padding:8px 14px 8px 10px;
  background:var(--surface);border:2px solid var(--border);border-radius:40px;
  cursor:pointer;transition:all .2s;font-family:'Barlow Condensed',sans-serif;
  font-size:.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.06);
}
.curso-chip:hover{border-color:var(--dkl);background:#f0faf9}
.curso-chip.active{background:var(--dk);border-color:var(--dk);color:#fff;box-shadow:0 4px 14px rgba(5,79,75,.35)}
.curso-chip-logo{width:40px;height:40px;border-radius:8px;object-fit:contain;background:rgba(255,255,255,.15);padding:2px;flex-shrink:0}
.cursos-resultado{background:var(--surface);border-radius:12px;box-shadow:0 2px 16px rgba(0,0,0,.07);overflow:hidden}
.curso-info-banner{background:linear-gradient(90deg,var(--dk2),var(--dk));padding:14px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.curso-edicion-select{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);color:#fff;padding:7px 10px;border-radius:7px;font-family:'Barlow Condensed',sans-serif;font-size:.80rem;font-weight:700;cursor:pointer;min-width:180px}
.curso-edicion-select option{background:var(--dk2);color:#fff}
.cursos-subtoolbar{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* ── Convocatorias (sistema interno) ──
   CLAVE: imágenes estrictamente contenidas */
#convocatorias-section{padding:20px 16px}
.conv-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:16px;margin-bottom:20px;
}
.conv-card{
  background:var(--surface);border:2px solid var(--border);
  border-radius:12px;overflow:hidden;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
  transition:box-shadow .2s,border-color .2s,transform .2s;
  display:flex;flex-direction:column;
}
.conv-card:hover{box-shadow:0 6px 24px rgba(5,79,75,.14);border-color:var(--dkl);transform:translateY(-2px)}
/* Contenedor header: altura FIJA, overflow hidden */
.conv-card-hdr{
  height:90px;width:100%;
  background:linear-gradient(135deg,var(--dk2),var(--dk));
  display:flex;align-items:center;gap:12px;
  padding:0 14px;position:relative;
  overflow:hidden;flex-shrink:0;
}
/* Imagen dentro del header: tamaño fijo y contenido */
.conv-card-logo{
  width:56px;height:56px;
  object-fit:contain;
  border-radius:8px;
  background:rgba(255,255,255,.12);
  padding:4px;
  flex-shrink:0;
  display:block;
  /* CRÍTICO: evitar que la imagen crezca fuera del contenedor */
  min-width:56px;
  max-width:56px;
  min-height:56px;
  max-height:56px;
}
.conv-card-hdr-info{
  flex:1;min-width:0;
  position:relative;z-index:1;
  overflow:hidden;
}
.conv-card-nombre{
  font-family:'Barlow Condensed',sans-serif;font-size:.82rem;
  font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:.02em;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.conv-card-edicion{
  font-size:.64rem;color:var(--accent);margin-top:3px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.conv-badge{
  position:absolute;top:8px;right:8px;
  padding:2px 8px;border-radius:20px;
  font-size:.6rem;font-family:'Barlow Condensed',sans-serif;
  font-weight:800;letter-spacing:.07em;text-transform:uppercase;z-index:2;white-space:nowrap;
}
.cb-open  {background:rgba(26,138,74,.9);color:#fff}
.cb-soon  {background:rgba(232,184,75,.9);color:#111}
.cb-closed{background:rgba(100,100,100,.8);color:#ccc}
.conv-card-body{padding:12px 14px;flex:1;display:flex;flex-direction:column}
.conv-card-meta{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:8px}
.conv-meta-tag{font-size:.7rem;color:var(--muted);font-weight:600}
.conv-card-desc{
  font-size:.76rem;color:var(--muted);line-height:1.45;margin-bottom:10px;flex:1;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.conv-card-actions{display:flex;gap:6px}

/* Formulario convocatorias */
.conv-form-box{
  background:var(--surface);border-radius:12px;
  box-shadow:0 2px 16px rgba(0,0,0,.07);overflow:hidden;
  margin-bottom:20px;display:none;animation:sysIn .25s ease;
}
.conv-form-box.open{display:block}
.conv-form-top{
  background:linear-gradient(135deg,var(--dk2),var(--dk));
  padding:14px 18px;display:flex;align-items:center;justify-content:space-between;
}
.conv-form-top h3{font-family:'Barlow Condensed',sans-serif;font-size:.95rem;font-weight:800;color:#fff;letter-spacing:.06em;text-transform:uppercase}
.conv-form-body{padding:18px}
.conv-grid-inputs{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:11px;margin-bottom:11px}
.conv-reqs-row{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:11px}
.conv-form-foot{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 18px;border-top:1px solid var(--border);
  background:#fafbfc;flex-wrap:wrap;gap:8px;
}

/* ── Print ── */
@media print{
  .topbar,.section-header .btn,.org-node-footer,
  .org-toolbar,.pagination,.table-toolbar,
  .btn-pdf,.btn-logout,#toast-container,.main-footer,
  .ph,.hero,.portal-main,.portal-footer,#portada{display:none!important}
  #sistema{display:block!important}
  .internal-section{display:block!important}
  .table-surface{box-shadow:none;border:1px solid #ccc}
  .rank-general,.rank-coronel,.rank-comandante,.rank-mayor,
  .rank-capitan,.rank-teniente,.rank-alferez,.rank-suboficial,.rank-civil,
  .org-node-top-stripe,.org-rango-pill,.badge{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  @page{margin:12mm;size:A4}
}

/* ══════════════════════════════════════════════
   RESPONSIVE — Mobile first
   ══════════════════════════════════════════════ */
@media(max-width:900px){
  .topbar{height:auto;min-height:54px;padding:8px 14px;flex-wrap:wrap}
  .topbar-nav{order:3;width:100%;justify-content:center}
  .topbar-brand{flex:1}
}
@media(max-width:640px){
  /* Portada */
  .ph-inner{height:auto;min-height:54px;padding:8px 14px;flex-wrap:wrap}
  .ph-right{width:100%;justify-content:flex-end}
  .ph-input{width:100px}
  .hero{padding:36px 14px 30px}
  .portal-main{padding:24px 14px 40px}
  .pc-grid{grid-template-columns:1fr}
  .req-fechas{grid-template-columns:1fr}
  /* Sistema */
  .internal-section{padding:12px 10px}
  #cursos-section,#convocatorias-section{padding:12px 10px}
  #menu-section{padding:20px 12px 32px}
  .section-header{flex-direction:column;align-items:flex-start}
  .grid-inputs{grid-template-columns:1fr 1fr}
  .stat-card{min-width:120px;padding:12px 14px}
  .stat-num{font-size:1.6rem}
  .org-node{width:148px}
  .org-node.root-node{width:172px}
  .org-node-photo{width:70px;height:70px}
  .org-node.root-node .org-node-photo{width:86px;height:86px}
  .org-children-row{gap:10px}
  .curso-chip{padding:6px 10px 6px 8px;font-size:.74rem}
  .curso-chip-logo{width:32px;height:32px}
  .table-toolbar{gap:8px}
  .search-input{min-width:140px}
  .filter-select{min-width:110px;font-size:.78rem}
  .conv-grid{grid-template-columns:1fr}
  .conv-grid-inputs{grid-template-columns:1fr}
  .conv-reqs-row{grid-template-columns:1fr}
  .conv-card-actions{flex-direction:column}
  .col-cip,.col-labor{display:none}
}
@media(max-width:400px){
  .topbar-btn{padding:4px 8px;font-size:.72rem}
  .org-node{width:128px}
  .org-node-photo{width:60px;height:60px}
  .org-nombre{font-size:.68rem}
  .ph-input{width:80px}
}