/* ===================== cuenta y respaldo del avance =====================
   Usa las variables de estilos.css, así se ve igual en la portada y en la aplicación. */

.c-ico{width:1.05rem; height:1.05rem; flex:none; fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round}

/* ---------- botón del encabezado ---------- */
.c-btn{
  position:relative; display:inline-flex; align-items:center; gap:.4rem;
  background:var(--sup2); border:1px solid var(--linea); border-radius:999px;
  padding:.36rem .8rem .36rem .65rem; font-size:.86rem; font-weight:600; color:var(--txt);
  transition:border-color .15s, transform .15s;
}
.c-btn:hover{border-color:var(--acc); transform:translateY(-1px)}
.c-btn.dentro{border-color:color-mix(in srgb,var(--acc) 45%, var(--linea))}
.c-btn .c-txt{max-width:9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.c-punto{width:.45rem; height:.45rem; border-radius:50%; background:transparent; transition:background .2s}
.c-punto.guardando{background:var(--warn); animation:c-late 1s ease-in-out infinite}
.c-punto.guardado{background:var(--ok)}
.c-punto.error{background:var(--mal)}
@keyframes c-late{50%{opacity:.35}}

/* ---------- ventana ---------- */
.c-capa{
  position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:1.15rem;
  background:rgba(8,14,26,.55); opacity:0; transition:opacity .18s ease;
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.c-capa.visible{opacity:1}
.c-caja{
  position:relative; width:min(100%,26rem); max-height:90vh; overflow-y:auto;
  background:var(--sup); border:1px solid var(--linea); border-radius:var(--r);
  box-shadow:var(--s3); padding:1.5rem 1.4rem 1.4rem;
  transform:translateY(8px); transition:transform .18s ease;
}
.c-capa.visible .c-caja{transform:none}
.c-cerrar{
  position:absolute; top:.7rem; right:.7rem; display:grid; place-items:center;
  width:2rem; height:2rem; border-radius:9px; background:none; border:0; color:var(--txt3);
}
.c-cerrar:hover{background:var(--sup2); color:var(--txt)}
.c-titulo{margin:0 0 .5rem; font-size:1.18rem; letter-spacing:-.025em; font-weight:750; line-height:1.25}
.c-bajada{margin:0 0 1.1rem; color:var(--txt2); font-size:.89rem; line-height:1.6}

/* ---------- solapas ---------- */
.c-solapas{display:grid; grid-template-columns:1fr 1fr; gap:.3rem; background:var(--sup2);
  border-radius:11px; padding:.25rem; margin-bottom:1.1rem}
.c-solapa{
  background:none; border:0; border-radius:8px; padding:.5rem; font-size:.87rem; font-weight:650;
  color:var(--txt2); transition:background .15s, color .15s;
}
.c-solapa.activa{background:var(--sup); color:var(--txt); box-shadow:var(--s1)}

/* ---------- formulario ---------- */
.c-form{display:grid; gap:.8rem}
.c-campo{display:grid; gap:.3rem}
.c-campo span{font-size:.8rem; font-weight:650; color:var(--txt2)}
.c-campo input{
  font:inherit; font-size:.92rem; color:var(--txt); background:var(--sup2);
  border:1px solid var(--linea); border-radius:10px; padding:.62rem .75rem; width:100%;
  transition:border-color .15s;
}
.c-campo input:focus{outline:none; border-color:var(--acc); background:var(--sup)}
.c-nota{margin:-.2rem 0 0; color:var(--txt3); font-size:.79rem}
.c-error{
  background:var(--mal-sup); color:var(--mal); border-radius:9px; padding:.6rem .75rem;
  font-size:.85rem; line-height:1.45; font-weight:600;
}
.c-enviar{width:100%; margin-top:.2rem; justify-content:center}
.c-enviar:disabled{opacity:.6}

/* ---------- ficha de la cuenta ---------- */
.c-aviso{
  background:var(--ok-sup); color:var(--ok); border-radius:9px; padding:.6rem .75rem;
  font-size:.85rem; font-weight:600; margin-bottom:1rem;
}
.c-ficha{
  display:flex; align-items:center; gap:.75rem; background:var(--sup2);
  border:1px solid var(--linea); border-radius:var(--r2); padding:.85rem .95rem; margin-bottom:.85rem;
}
.c-ficha .c-ico{width:1.5rem; height:1.5rem; color:var(--acc)}
.c-ficha b{display:block; font-size:.95rem; letter-spacing:-.015em}
.c-ficha span{display:block; color:var(--txt2); font-size:.82rem; word-break:break-all}
.c-copia{display:flex; align-items:center; gap:.5rem; margin:0 0 1.2rem; color:var(--txt2); font-size:.84rem}
.c-copia .c-ico{color:var(--txt3)}
.c-opciones{display:grid; gap:.5rem}
.c-opciones .btn{width:100%; justify-content:center}

@media (max-width:420px){
  .c-btn .c-txt{display:none}
  .c-btn{padding:.36rem .55rem}
  .c-caja{padding:1.3rem 1.1rem 1.2rem}
}
@media (prefers-reduced-motion:reduce){
  .c-capa,.c-caja,.c-btn{transition:none}
  .c-punto.guardando{animation:none}
}