/* =============================================================================
   assets/css/pages/unirse.css — ClassPro IA · IA-v1 Lote B (PLAN_TECNICO_IA-v1_LOTE_B_2026-11-01.md §3.2).
   Lo propio de views/Unirse/index.php sobre la línea limpia del registro (body.cp-registro de login-amanecer.css): el
   código, la tarjeta de la institución, los dos botones y el check verde animado. Acotado a body.cp-unirse.
   ============================================================================= */

body.cp-unirse .input-wrap input.codigo {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 20px; letter-spacing: .14em; text-transform: uppercase;
}
body.cp-unirse .input-wrap input.codigo::placeholder { letter-spacing: .04em; text-transform: none; font-family: var(--f-body); font-size: 16px; }

body.cp-unirse .inst-tarjeta {
  display: flex; align-items: center; gap: 16px; margin: 18px 0 22px; padding: 20px 22px;
  border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2), 0 10px 30px -18px rgba(11, 49, 64, .35);
}
body.cp-unirse .inst-ico {
  flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px;
  background: var(--cielo-0, #E6F6FD); color: var(--cielo, #0A6F9C);
}
body.cp-unirse .inst-ico .ic { width: 28px; height: 28px; }
body.cp-unirse .inst-nombre { margin: 0; font: 500 21px/1.3 var(--f-head, var(--f-body)); color: var(--ink); overflow-wrap: anywhere; }

body.cp-unirse .botones-2 { display: grid; gap: 10px; }
body.cp-unirse .btn.secundario {
  background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2);
}
body.cp-unirse .btn.secundario:hover { box-shadow: inset 0 0 0 1px #B9C9CE; background: #fff; }

/* el check verde: el aro se dibuja y después la tilde */
body.cp-unirse .listo { text-align: center; }
body.cp-unirse .ok-anim { display: block; width: 112px; height: 112px; margin: 6px auto 18px; }
body.cp-unirse .ok-fondo { fill: #E8F7EE; }
body.cp-unirse .ok-aro { fill: none; stroke: #1F9D55; stroke-width: 5; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 60px 60px; }
body.cp-unirse .ok-tilde { fill: none; stroke: #1F9D55; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
html.mo body.cp-unirse .listo:not([hidden]) .ok-fondo { animation: ok-crece .45s cubic-bezier(.2, .9, .3, 1.3) both; transform-origin: 60px 60px; }
html.mo body.cp-unirse .listo:not([hidden]) .ok-aro { stroke-dasharray: 340; stroke-dashoffset: 340; animation: ok-traza .6s .15s ease-out forwards; }
html.mo body.cp-unirse .listo:not([hidden]) .ok-tilde { stroke-dasharray: 80; stroke-dashoffset: 80; animation: ok-traza .4s .65s ease-out forwards; }
@keyframes ok-traza { to { stroke-dashoffset: 0; } }
@keyframes ok-crece { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
body.cp-unirse .listo h2 { margin-bottom: 8px; }
body.cp-unirse .nota-listo { margin: 4px 0 22px; color: var(--muted); font-size: 14px; line-height: 1.5; }
body.cp-unirse .access-footer { justify-content: center; }