/* =========================================================
   INFOP v2 — Páginas públicas
   Formulario de inscripción, formularios de empresa y login.
   Reemplaza el CSS que estaba incrustado en cada uno de esos archivos.
   ========================================================= */

*,*::before,*::after{ box-sizing:border-box; }

body.pagina-publica{
  margin:0;
  font-family:var(--font);
  font-size:var(--fs-base);
  color:var(--ink);
  background:
    radial-gradient(900px 420px at 18% 0%, rgba(35,79,159,.14), transparent 55%),
    radial-gradient(900px 420px at 82% 8%, rgba(43,98,185,.10), transparent 60%),
    var(--bg);
  min-height:100vh;
  display:flex; flex-direction:column;
  line-height:1.5;
}

.pagina-publica h1,.pagina-publica h2,.pagina-publica h3{ margin:0; line-height:1.25; }
.pagina-publica a{ color:var(--infop-700); }
.pagina-publica img{ max-width:100%; }

.pagina-publica :focus-visible{
  outline:3px solid rgba(43,98,185,.45);
  outline-offset:2px;
  border-radius:var(--r-sm);
}

/* ---------------- Cabecera ---------------- */
.site-header{
  background:var(--surface);
  border-bottom:3px solid var(--infop-700);
  box-shadow:var(--sh-2);
}
.site-header-inner{
  max-width:1100px; margin:0 auto;
  padding:var(--s-4) var(--s-5);
  display:flex; align-items:center; justify-content:center;
  gap:var(--s-5); flex-wrap:wrap;
}
.site-header-inner img{ width:auto; object-fit:contain; }
.logo-institucional{ height:58px; max-width:360px; }
.logo-emblema{ height:58px; width:auto; }
.site-header__sep{
  width:1px; align-self:stretch; min-height:40px;
  background:var(--line);
}

/* ---------------- Contenido ---------------- */
.site-main{
  flex:1;
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding:var(--s-6) var(--s-4) var(--s-12);
}
.site-main--estrecho{ max-width:520px; display:flex; align-items:center; }
.site-main--ancho{ max-width:1320px; }

/* ---------------- Pie ---------------- */
.site-footer{
  border-top:1px solid var(--line);
  background:var(--surface);
  padding:var(--s-4) var(--s-5);
  text-align:center;
  font-size:var(--fs-xs); color:var(--muted);
}
.site-footer p{ margin:0; }
.site-footer__fina{ margin-top:var(--s-1); color:var(--faint); }

/* ---------------- Tarjeta de formulario ---------------- */
.form-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:var(--s-6);
  box-shadow:var(--sh-3);
  width:100%;
}
.form-header{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--s-4);
  padding-bottom:var(--s-4);
  border-bottom:1px solid var(--line);
  margin-bottom:var(--s-5);
}
.form-title{
  font-size:var(--fs-xl); font-weight:800;
  letter-spacing:-.3px; color:var(--infop-900);
}
.form-subtitle{
  margin:var(--s-2) 0 0;
  font-size:var(--fs-sm); color:var(--muted);
}
.badge-empresa{
  display:inline-flex; align-items:center; gap:var(--s-2);
  padding:var(--s-2) var(--s-4);
  border-radius:var(--r-full);
  background:var(--infop-100);
  border:1px solid rgba(35,79,159,.22);
  color:var(--infop-800);
  font-size:var(--fs-xs); font-weight:800;
  white-space:nowrap;
}
.badge-empresa::before{ content:"🏢"; }

.section-title{
  font-size:var(--fs-md); font-weight:800;
  color:var(--ink); margin:var(--s-5) 0 var(--s-3);
}

/* ---------------- Campos ---------------- */
.form-grid{
  display:grid; gap:var(--s-4);
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
}
.field-group{ display:flex; flex-direction:column; gap:var(--s-2); }
.field-group.span-2{ grid-column:1 / -1; }
.field-group > label{
  font-size:var(--fs-sm); font-weight:800; color:var(--ink-2);
}

.field-group input, .field-group select, .field-group textarea,
.modern-select{
  width:100%;
  padding:var(--s-3);
  border:1px solid var(--line-strong);
  border-radius:var(--r-md);
  background:var(--surface);
  font-family:inherit; font-size:var(--fs-base); color:var(--ink);
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.field-group textarea{ min-height:88px; resize:vertical; }
.field-group input[type="checkbox"], .field-group input[type="radio"]{
  width:18px; height:18px; accent-color:var(--infop-700);
}

.field-group input:focus, .field-group select:focus,
.field-group textarea:focus, .modern-select:focus{
  outline:none;
  border-color:var(--infop-600);
  box-shadow:0 0 0 4px rgba(43,98,185,.14);
}

.field-group .hint, .hint{ font-size:var(--fs-xs); color:var(--muted); }

.input-invalid{ border-color:var(--danger) !important; background:#fff7f7 !important; }
.input-invalid:focus{ box-shadow:0 0 0 4px rgba(220,38,38,.14) !important; }
.field-error{
  font-size:var(--fs-xs); font-weight:700; color:var(--danger-ink);
}

/* Contraseña con botón de mostrar/ocultar */
.password-wrap{ position:relative; }
.password-wrap input{ padding-right:44px; }
.toggle-pass{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer;
  color:var(--muted); font-size:15px;
  padding:var(--s-2);
  border-radius:var(--r-sm);
}
.toggle-pass:hover{ color:var(--infop-700); }
.toggle-pass svg{ width:20px; height:20px; display:block; }
.toggle-pass{ display:inline-flex; align-items:center; justify-content:center; }

/* Casillas en tarjeta */
.checkbox-list{
  display:grid; gap:var(--s-2);
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
}
.checkbox-item{
  display:flex; align-items:flex-start; gap:var(--s-3);
  padding:var(--s-3);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface);
  cursor:pointer;
  transition:border-color var(--t-fast), background var(--t-fast);
}
.checkbox-item:hover{ border-color:var(--infop-500); background:var(--infop-50); }
.checkbox-item input{
  width:18px; height:18px; margin-top:2px;
  accent-color:var(--infop-700); flex-shrink:0;
}
.checkbox-item span{ font-weight:700; font-size:var(--fs-sm); }

/* ---------------- Asistente por pasos ---------------- */
.steps-nav{
  display:flex; gap:var(--s-2);
  justify-content:center; flex-wrap:wrap;
  margin:var(--s-4) 0 var(--s-5);
}
.steps-nav > div, .step-circle{
  width:36px; height:36px;
  border-radius:var(--r-full);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:var(--fs-sm);
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--muted);
}
.steps-nav > div.active,
.steps-nav > div.current{
  background:var(--infop-100);
  border-color:rgba(35,79,159,.28);
  color:var(--infop-800);
}
.steps-nav > div.done{
  background:var(--ok-bg);
  border-color:rgba(34,197,94,.3);
  color:var(--ok-ink);
}

/* El JS del asistente alterna la clase .form-step-active y ademas fija
   display en linea; el !important preserva el comportamiento original. */
.form-step{ display:none !important; }
.form-step-active{ display:block !important; }

/* Numero de paso dentro del titulo de seccion */
.section-title .step{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px;
  border-radius:var(--r-full);
  background:var(--infop-100);
  border:1px solid rgba(35,79,159,.24);
  color:var(--infop-800);
  font-size:var(--fs-sm); font-weight:800;
  margin-right:var(--s-2);
}

.wizard-buttons{
  display:flex; justify-content:space-between; gap:var(--s-3);
  flex-wrap:wrap;
  margin-top:var(--s-6); padding-top:var(--s-4);
  border-top:1px solid var(--line);
}

/* ---------------- Botones ---------------- */
/* .btn base viene de components.css */
.btn-primary, .btn-next{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  padding:var(--s-3) var(--s-5);
  border-radius:var(--r-md);
  border:1px solid transparent;
  background:linear-gradient(135deg, var(--infop-800), var(--infop-600));
  color:#fff;
  font-family:inherit; font-size:var(--fs-sm); font-weight:800;
  cursor:pointer; text-decoration:none;
  box-shadow:0 8px 20px rgba(35,79,159,.28);
  transition:background var(--t-fast), transform var(--t-fast);
}
.btn-primary:hover, .btn-next:hover{
  background:linear-gradient(135deg, var(--infop-900), var(--infop-700));
  color:#fff; text-decoration:none;
}
.btn-primary:active, .btn-next:active{ transform:translateY(1px); }

.btn-secondary-outline{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  padding:var(--s-3) var(--s-5);
  border-radius:var(--r-md);
  border:1px solid var(--line-strong);
  background:var(--surface);
  color:var(--ink);
  font-family:inherit; font-size:var(--fs-sm); font-weight:800;
  cursor:pointer; text-decoration:none;
}
.btn-secondary-outline:hover{ background:var(--infop-50); text-decoration:none; }

/* ---------------- Alertas ---------------- */
/* .alert base viene de components.css */
.alert-success{ background:var(--ok-bg);     border-color:var(--ok);     color:var(--ok-ink); }
.alert-error  { background:var(--danger-bg); border-color:var(--danger); color:var(--danger-ink); }
.alert-info   { background:var(--info-bg);   border-color:var(--info);   color:var(--info-ink); }

/* ---------------- Tablas ---------------- */
.table-wrapper{
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface);
  -webkit-overflow-scrolling:touch;
}
.table-solicitudes{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.table-solicitudes th{
  text-align:left;
  padding:var(--s-3) var(--s-4);
  background:var(--surface-2);
  color:var(--muted);
  font-size:var(--fs-xs); font-weight:800;
  text-transform:uppercase; letter-spacing:.5px;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.table-solicitudes td{
  padding:var(--s-3) var(--s-4);
  border-bottom:1px solid var(--line);
}
.table-solicitudes tbody tr:last-child td{ border-bottom:none; }
.table-solicitudes tbody tr:hover{ background:var(--infop-50); }

/* ---------------- Login ---------------- */
.login-card{
  width:100%;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:var(--s-8);
  box-shadow:var(--sh-3);
}
.login-card .title{
  text-align:center;
  font-size:var(--fs-lg); font-weight:800;
  color:var(--infop-900);
  margin-bottom:var(--s-2);
}
.login-card .subtitle{
  text-align:center;
  font-size:var(--fs-sm); color:var(--muted);
  margin-bottom:var(--s-6);
}
.login-card label{
  display:block;
  font-size:var(--fs-sm); font-weight:800; color:var(--ink-2);
  margin-bottom:var(--s-2);
}
.login-card input[type="email"],
.login-card input[type="password"]{
  width:100%;
  padding:var(--s-3);
  border:1px solid var(--line-strong);
  border-radius:var(--r-md);
  margin-bottom:var(--s-4);
  font-family:inherit; font-size:var(--fs-base);
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.login-card input:focus{
  outline:none;
  border-color:var(--infop-600);
  box-shadow:0 0 0 4px rgba(43,98,185,.14);
}
.login-card .btn{
  width:100%;
  padding:var(--s-3);
  margin-top:var(--s-2);
  background:linear-gradient(135deg, var(--infop-800), var(--infop-600));
  border:1px solid transparent;
  border-radius:var(--r-md);
  color:#fff;
  font-family:inherit; font-size:var(--fs-md); font-weight:800;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(35,79,159,.28);
}
.login-card .btn:hover{ background:linear-gradient(135deg, var(--infop-900), var(--infop-700)); }
.login-card .copyright{
  margin-top:var(--s-5);
  text-align:center;
  font-size:var(--fs-xs); color:var(--faint);
}
.login-card .alert{ margin-bottom:var(--s-4); }

/* ---------------- Responsive ---------------- */
@media (max-width:820px){
  .form-header{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:768px){
  .site-header-inner{ padding:var(--s-3) var(--s-4); }
  .site-header-inner{ gap:var(--s-3); }
  .logo-institucional{ height:40px; max-width:250px; }
  .logo-emblema{ height:46px; }
  .site-main{ padding:var(--s-5) var(--s-3) var(--s-10); }
  .form-card{ padding:var(--s-4); border-radius:var(--r-lg); }
  .form-title{ font-size:var(--fs-lg); }
  /* Una sola columna, y se anula el grid-column en linea de algunos
     campos: si no, generan una segunda columna y desbordan la pantalla. */
  .form-grid{ grid-template-columns:1fr; }
  .form-grid > [style*="grid-column"]{ grid-column:1 / -1 !important; }
  .wizard-buttons{ flex-direction:column-reverse; }
  .wizard-buttons > *{ width:100%; }
  .login-card{ padding:var(--s-5); }
}
@media (max-width:480px){
  .logo-institucional{ height:30px; max-width:180px; }
  .logo-emblema{ height:36px; }
  .site-header__sep{ display:none; }
}

/* ---------------- Insignias de estado ----------------
   badgeEstadoClass() en solicitudes_empresa.php devuelve estos nombres
   desde PHP, por eso no aparecen literalmente en el markup. */
.badge-success{ background:var(--ok-bg);       color:var(--ok-ink); }
.badge-danger { background:var(--danger-bg);   color:var(--danger-ink); }
.badge-warning{ background:var(--warn-bg);     color:var(--warn-ink); }
.badge-info   { background:var(--info-bg);     color:var(--info-ink); }

/* Campo trampa anti-spam: invisible para las personas, presente para los bots.
   No se usa display:none porque algunos bots ignoran los campos ocultos así. */
.campo-trampa{
  position:absolute !important;
  left:-9999px !important;
  width:1px; height:1px;
  overflow:hidden;
}

/* =========================================================
   Pantalla de inscripción completada
   Sustituye al formulario y entrega los datos de acceso en pantalla,
   sin depender de que al participante le llegue un correo.
   ========================================================= */
.exito-card{ max-width:720px; margin:0 auto; text-align:center; }

.exito-cabecera{ margin-bottom:var(--s-5); }
.exito-icono{
  display:inline-flex; align-items:center; justify-content:center;
  width:64px; height:64px;
  border-radius:var(--r-full);
  background:var(--ok-bg); color:var(--ok);
  font-size:32px;
  margin-bottom:var(--s-4);
}
.exito-titulo{
  font-size:var(--fs-xl); font-weight:800;
  color:var(--infop-800); line-height:1.3;
}
.exito-intro{
  color:var(--muted); font-size:var(--fs-sm);
  margin:0 0 var(--s-5);
}

/* Bloque de credenciales */
.credenciales{
  background:linear-gradient(135deg, var(--infop-800), var(--infop-600));
  border-radius:var(--r-lg);
  padding:var(--s-5);
  color:#fff;
  text-align:left;
  box-shadow:var(--sh-3);
}
.credenciales__titulo{
  font-size:var(--fs-sm); font-weight:800;
  text-transform:uppercase; letter-spacing:.6px;
  color:rgba(255,255,255,.85);
  margin-bottom:var(--s-4);
  padding-bottom:var(--s-3);
  border-bottom:1px solid rgba(255,255,255,.22);
}
.credenciales__lista{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--s-3) var(--s-5);
  margin:0;
  align-items:baseline;
}
.credenciales__lista dt{
  font-weight:800; font-size:var(--fs-sm);
  color:rgba(255,255,255,.9);
  white-space:nowrap;
}
.credenciales__lista dd{
  margin:0;
  font-size:var(--fs-base);
  word-break:break-word;
}
.credenciales__lista dd a{ color:#fff; text-decoration:underline; }
.credenciales__lista dd code{
  font-family:ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size:var(--fs-md); font-weight:700;
  background:rgba(255,255,255,.18);
  padding:2px var(--s-2);
  border-radius:var(--r-sm);
  letter-spacing:.5px;
}

.exito-contacto{
  margin:var(--s-5) 0 0;
  font-size:var(--fs-sm); color:var(--ink-2);
}
.exito-acciones{
  display:flex; justify-content:center; gap:var(--s-3);
  flex-wrap:wrap;
  margin-top:var(--s-5);
}

@media (max-width:560px){
  .credenciales__lista{ grid-template-columns:1fr; gap:var(--s-1); }
  .credenciales__lista dt{ margin-top:var(--s-3); }
  .exito-acciones > *{ width:100%; }
}

/* Al imprimir o guardar en PDF solo interesan las credenciales */
@media print{
  .site-header, .site-footer, .exito-acciones{ display:none !important; }
  body.pagina-publica{ background:#fff; }
  .exito-card{ box-shadow:none; border:none; }
  .credenciales{
    background:#fff !important;
    color:#000 !important;
    border:2px solid #234f9f;
    box-shadow:none;
  }
  .credenciales__titulo{ color:#234f9f !important; border-bottom-color:#234f9f; }
  .credenciales__lista dt{ color:#000 !important; }
  .credenciales__lista dd a,
  .credenciales__lista dd code{ color:#000 !important; background:none !important; }
}

/* =========================================================
   Verificación contra el registro nacional
   ========================================================= */
/* Mientras la verificación está pendiente, el asistente queda oculto */
.form-card.esta-verificando .steps-nav,
.form-card.esta-verificando .steps-progress,
.form-card.esta-verificando .volver-verificar-bar,
.form-card.esta-verificando #formInscripcion{ display:none; }

.verificacion-rnp{ max-width:680px; margin:0 auto; padding:var(--s-4) 0; }
.verificacion-rnp__campos{
  display:grid; gap:var(--s-4);
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  margin-top:var(--s-4);
}
.verificacion-rnp__fecha{
  display:grid; grid-template-columns:1fr 1fr 1.4fr; gap:var(--s-2);
}
.verificacion-rnp__fecha input{ text-align:center; }
.verificacion-rnp__acciones{
  display:flex; justify-content:flex-end; gap:var(--s-3);
  flex-wrap:wrap;
  margin-top:var(--s-5); padding-top:var(--s-4);
  border-top:1px solid var(--line);
}
.verificacion-rnp #v_mensaje{ margin-top:var(--s-4); }

/* Campos rellenados desde el registro: bloqueados y distinguibles */
.campo-verificado{
  background:var(--infop-50) !important;
  border-color:var(--infop-100) !important;
  color:var(--ink) !important;
  cursor:default;
}

/* Aviso verde dentro del paso 1 */
.aviso-verificado{
  display:flex; align-items:center; gap:var(--s-2);
  background:var(--ok-bg); color:var(--ok-ink);
  border-left:4px solid var(--ok);
  padding:var(--s-3) var(--s-4);
  border-radius:var(--r-md);
  font-size:var(--fs-sm); font-weight:700;
  margin-bottom:var(--s-4);
}

@media (max-width:560px){
  .verificacion-rnp__acciones{ flex-direction:column-reverse; }
  .verificacion-rnp__acciones > *{ width:100%; }
}

/* Aviso informativo cuando la persona no está en el registro (modo manual) */
.aviso-manual{
  display:flex; align-items:center; gap:var(--s-2);
  background:var(--info-bg); color:var(--info-ink);
  border-left:4px solid var(--info);
  padding:var(--s-3) var(--s-4);
  border-radius:var(--r-md);
  font-size:var(--fs-sm); font-weight:700;
  margin-bottom:var(--s-4);
}

/* Sugerencia de dominio de correo ("¿quiso decir gmail.com?") */
.correo-sugerencia{
  font-size:var(--fs-xs);
  color:var(--warn-ink);
  margin-top:var(--s-1);
}
.correo-sugerencia__link{
  background:none; border:none; padding:0;
  font:inherit; font-weight:800;
  color:var(--infop-700);
  text-decoration:underline;
  cursor:pointer;
}

/* ================= Cursos a matricular (multi-curso) ================= */
.cursos-max-label{ font-weight:600; color:var(--muted); font-size:var(--fs-sm); }
.btn-agregar-curso{ width:100%; margin-top:var(--s-3); }

.curso-bloque{
  position:relative;
  border:1px dashed var(--line-strong);
  border-radius:var(--r-lg);
  padding:var(--s-5);
  margin-bottom:var(--s-4);
  display:grid; gap:var(--s-4);
}
.curso-bloque + .curso-bloque{ margin-top:0; }
.curso-quitar{
  position:absolute; top:var(--s-2); right:var(--s-2);
  width:30px; height:30px;
  border:none; border-radius:var(--r-full);
  background:var(--danger-bg); color:var(--danger-ink);
  cursor:pointer; font-size:14px;
  display:inline-flex; align-items:center; justify-content:center;
}
.curso-quitar:hover{ background:var(--danger); color:#fff; }

/* Ficha del curso */
.curso-ficha{
  background:var(--infop-50);
  border:1px solid var(--infop-100);
  border-radius:var(--r-md);
  padding:var(--s-4);
}
.curso-ficha__desc{ margin:0 0 var(--s-3); font-size:var(--fs-sm); color:var(--ink-2); line-height:1.6; }
.curso-ficha__datos{
  display:grid; grid-template-columns:auto 1fr; gap:var(--s-2) var(--s-4);
  margin:0; font-size:var(--fs-sm);
}
.curso-ficha__datos dt{ font-weight:800; color:var(--infop-800); white-space:nowrap; }
.curso-ficha__datos dd{ margin:0; color:var(--ink); }

/* Lista de cursos en la pantalla de éxito */
.cred-cursos{ margin:0; padding-left:var(--s-4); }
.cred-cursos li{ margin:2px 0; }

/* Botón "Regresar a verificar" en el formulario */
.volver-verificar-bar{ margin-bottom:var(--s-2); }
.btn-volver-verificar{
  display:inline-flex; align-items:center; gap:var(--s-2);
  font-size:var(--fs-sm); font-weight:800;
  color:var(--infop-700);
  padding:var(--s-2) var(--s-3);
  border-radius:var(--r-md);
  border:1px solid var(--line-strong);
  background:var(--surface);
  text-decoration:none;
  transition:background var(--t-fast);
}
.btn-volver-verificar:hover{ background:var(--infop-50); text-decoration:none; }