/* =========================================================
   COSECAD · Certificados — estilos públicos (responsive)
   Identidad: azul marino #001e5c · azul #003da3 · dorado #c8a04a
   ========================================================= */
.cosecad-vbox,.cosecad-panel-wrap,.cpanel{
  --azul-marino:#001e5c; --azul:#003da3; --azul-claro:#005cbf; --azul-luz:#e8f0fb;
  --gris:#7a8190; --gris-claro:#f4f6fa; --plata:#c9d2de; --dorado:#c8a04a;
  --texto:#1a2233; --texto-suave:#5a6478;
  --ok:#1f7a4d; --ok-bg:#e6f4ec; --bad:#a32626; --bad-bg:#fbe9e9;
  --radio:16px; --sombra:0 14px 40px rgba(0,30,92,.12);
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif; color:var(--texto);
  box-sizing:border-box;
}
.cosecad-vbox *,.cosecad-panel-wrap *,.cpanel *{ box-sizing:border-box; }

/* ---------- Encabezado de sección ---------- */
.cosecad-seccion-head,.cosecad-vhead{ text-align:center; max-width:680px; margin:0 auto 22px; padding:0 4px; }
.cosecad-eyebrow{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  color:var(--dorado); background:var(--azul-luz); padding:6px 14px; border-radius:999px; margin-bottom:10px; }
.cosecad-seccion-head h2,.cosecad-vhead h2{ margin:6px 0; color:var(--azul-marino); font-size:clamp(20px,4.2vw,30px); line-height:1.2; }
.cosecad-seccion-head p,.cosecad-vhead p{ margin:0; color:var(--texto-suave); font-size:clamp(14px,2.6vw,16px); }

/* ---------- Widget verificación suelto ---------- */
.cosecad-vbox{ max-width:780px; margin:0 auto; }
.cosecad-vbody{ background:#fff; border:1px solid var(--plata); border-radius:var(--radio); box-shadow:var(--sombra);
  padding:clamp(16px,3vw,28px); border-top:4px solid var(--dorado); }

/* ---------- Panel con pestañas ---------- */
.cpanel{ max-width:1000px; margin:0 auto; background:#fff; border:1px solid var(--plata);
  border-radius:var(--radio); box-shadow:var(--sombra); overflow:hidden; }
.cpanel-tabs{ display:flex; gap:2px; background:var(--azul-marino); padding:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.cpanel-tabs::-webkit-scrollbar{ height:0; }
.cpanel-tab{ flex:1 1 auto; min-width:150px; display:flex; align-items:center; justify-content:center; gap:8px;
  background:transparent; color:#cdd9ee; border:0; padding:13px 16px; border-radius:10px; cursor:pointer;
  font-size:14px; font-weight:600; white-space:nowrap; transition:.18s; }
.cpanel-tab svg{ width:18px; height:18px; fill:currentColor; flex:none; }
.cpanel-tab:hover{ background:rgba(255,255,255,.08); color:#fff; }
.cpanel-tab.active{ background:#fff; color:var(--azul-marino); box-shadow:0 4px 12px rgba(0,0,0,.18); }
.cpanel-tab.active svg{ fill:var(--dorado); }
.cpanel-body{ padding:clamp(16px,3vw,30px); }
.cpanel-pane{ display:none; animation:cfade .25s ease; }
.cpanel-pane.active{ display:block; }
@keyframes cfade{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
.cosecad-cv-head{ margin-bottom:16px; }
.cosecad-cv-head h3{ margin:0 0 4px; color:var(--azul-marino); font-size:19px; }
.cosecad-cv-head p{ margin:0; color:var(--texto-suave); font-size:14px; }

/* ---------- Formulario de búsqueda ---------- */
.cosecad-search{ display:flex; flex-wrap:wrap; gap:10px; }
.cosecad-q{ flex:1 1 240px; min-width:0; padding:14px 16px; font-size:16px; /* 16px evita zoom en iOS */
  border:2px solid var(--plata); border-radius:12px; outline:none; transition:.15s; background:#fff; color:var(--texto); }
.cosecad-q:focus{ border-color:var(--azul); box-shadow:0 0 0 4px rgba(0,61,163,.12); }
.cosecad-btn{ flex:0 0 auto; padding:14px 26px; font-size:15px; font-weight:700; color:#fff;
  background:linear-gradient(135deg,var(--azul-marino),var(--azul)); border:0; border-radius:12px; cursor:pointer;
  transition:.15s; box-shadow:0 6px 16px rgba(0,30,92,.25); }
.cosecad-btn:hover{ transform:translateY(-1px); box-shadow:0 9px 22px rgba(0,30,92,.32); }

/* ---------- Tarjeta de resultado ---------- */
.cosecad-result{ margin-top:18px; }
.cosecad-card{ border:1px solid var(--plata); border-radius:14px; overflow:hidden; box-shadow:var(--sombra); }
.cosecad-status{ display:flex; align-items:center; gap:12px; padding:14px 18px; font-weight:700; font-size:15px; }
.cosecad-status .dot{ width:26px; height:26px; border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; flex:none; }
.cosecad-status.ok{ background:var(--ok-bg); color:var(--ok); } .cosecad-status.ok .dot{ background:var(--ok); }
.cosecad-status.bad{ background:var(--bad-bg); color:var(--bad); } .cosecad-status.bad .dot{ background:var(--bad); }
.cosecad-grid{ padding:6px 18px 14px; }
.cosecad-item{ display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px dashed #e3e6ef; }
.cosecad-item:last-child{ border-bottom:0; }
.cosecad-item .k{ color:var(--texto-suave); font-size:13px; flex:none; }
.cosecad-item .v{ color:var(--azul-marino); font-weight:700; font-size:14px; text-align:right; min-width:0; overflow-wrap:anywhere; }
.cosecad-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding:14px 18px; background:var(--gris-claro); border-top:1px solid #e3e6ef; }
.cosecad-qr{ width:72px; height:72px; border-radius:8px; background:#fff; padding:4px; border:1px solid var(--plata); flex:none; }
.cosecad-foot-txt{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; flex:1 1 auto; }
.cosecad-foot-txt small{ color:var(--texto-suave); font-size:12px; width:100%; }
.cosecad-dl{ display:inline-block; padding:9px 16px; border-radius:9px; font-weight:700; font-size:13px; text-decoration:none;
  background:var(--dorado); color:var(--azul-marino); transition:.15s; }
.cosecad-dl:hover{ filter:brightness(1.06); transform:translateY(-1px); }

/* ---------- Egresados ---------- */
.eg-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:22px; }
.eg-stat{ background:var(--azul-luz); border:1px solid #d4e1f4; border-radius:12px; padding:16px 10px; text-align:center; }
.eg-stat .n{ font-size:clamp(20px,4vw,28px); font-weight:800; color:var(--azul-marino); line-height:1; }
.eg-stat .l{ font-size:12px; color:var(--texto-suave); margin-top:6px; }
.eg-cols{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.eg-block h4{ display:flex; align-items:center; gap:8px; margin:0 0 14px; color:var(--azul-marino); font-size:15px; }
.eg-block h4 svg{ width:18px; height:18px; fill:var(--dorado); }
.bar-row{ margin-bottom:12px; }
.bar-top{ display:flex; justify-content:space-between; gap:10px; font-size:13px; margin-bottom:5px; }
.bar-top .lbl{ color:var(--texto); overflow-wrap:anywhere; } .bar-top .val{ color:var(--azul); font-weight:700; flex:none; }
.bar-track{ height:9px; background:var(--gris-claro); border-radius:99px; overflow:hidden; }
.bar-fill{ height:100%; background:linear-gradient(90deg,var(--azul),var(--dorado)); border-radius:99px; transition:width .6s ease; }
.eg-foot{ margin-top:18px; font-size:12px; color:var(--gris); text-align:center; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
/* Tablet */
@media (max-width:860px){
  .eg-cols{ grid-template-columns:1fr; gap:18px; }
}
/* Celular grande */
@media (max-width:600px){
  .eg-stats{ grid-template-columns:repeat(2,1fr); }
  .cosecad-btn{ flex:1 1 100%; }           /* botón a todo el ancho */
  .cpanel-tab{ min-width:140px; font-size:13px; padding:12px; }
}
/* Celular pequeño */
@media (max-width:430px){
  .cosecad-item{ flex-direction:column; gap:2px; padding:9px 0; }
  .cosecad-item .v{ text-align:left; font-size:15px; }
  .cosecad-status{ font-size:14px; }
  .cosecad-foot{ justify-content:center; text-align:center; }
  .cosecad-foot-txt{ justify-content:center; }
  .cpanel-tab span{ font-size:12px; }
}

/* ---------- Cargando ---------- */
.cosecad-loading{ padding:18px; text-align:center; color:var(--texto-suave); font-size:14px; }
.cosecad-loading::before{ content:""; display:inline-block; width:16px; height:16px; margin-right:8px; vertical-align:-3px;
  border:2px solid var(--plata); border-top-color:var(--azul); border-radius:50%; animation:cspin .7s linear infinite; }
@keyframes cspin{ to{ transform:rotate(360deg); } }

/* ---------- Varios certificados por cédula ---------- */
.cosecad-multi-head{ padding:14px 18px 6px; }
.cmh-name{ font-size:16px; font-weight:800; color:var(--azul-marino); overflow-wrap:anywhere; }
.cmh-sub{ font-size:13px; color:var(--texto-suave); margin-top:2px; }
.cosecad-cert-list{ padding:8px 14px 16px; display:flex; flex-direction:column; gap:10px; }
.cci{ display:flex; gap:12px; align-items:stretch; border:1px solid var(--plata); border-radius:12px;
  overflow:hidden; background:#fff; border-left:5px solid var(--ok); }
.cci.bad{ border-left-color:var(--bad); background:#fffafa; }
.cci-body{ flex:1 1 auto; min-width:0; padding:12px 14px; }
.cci-top{ display:flex; align-items:center; gap:10px; margin-bottom:4px; flex-wrap:wrap; }
.cci-badge{ font-size:11px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; padding:3px 9px; border-radius:999px;
  background:var(--ok-bg); color:var(--ok); }
.cci.bad .cci-badge{ background:var(--bad-bg); color:var(--bad); }
.cci-fecha{ font-size:12px; color:var(--gris); }
.cci-curso{ margin:2px 0 6px; font-size:15px; color:var(--azul-marino); line-height:1.3; overflow-wrap:anywhere; }
.cci-meta{ display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12.5px; color:var(--texto-suave); }
.cci-meta strong{ color:var(--texto); font-weight:700; }
.cci-cod{ font-family:'Courier New',monospace; color:var(--azul); }
.cci-actions{ flex:none; display:flex; flex-direction:column; gap:6px; justify-content:center; padding:12px 12px 12px 0; }
.cci-actions .cosecad-dl{ text-align:center; padding:8px 14px; font-size:12.5px; }
.cci-pdf{ background:var(--azul-marino); color:#fff; }
.cci-na{ font-size:12px; color:var(--bad); font-weight:700; text-align:center; }

@media (max-width:560px){
  .cci{ flex-direction:column; border-left-width:5px; }
  .cci-actions{ flex-direction:row; padding:0 14px 12px; }
  .cci-actions .cosecad-dl{ flex:1 1 auto; }
}